【微信小程序——案例——本地生活(列表页面)】

案例------本地生活(列表页面)

九宫格中实现导航跳转------以汽车服务为案例(之后可以全部实现页面跳转------现在先实现一个)

在app.json中添加新页面

修改之前的九宫格view改为navitage

效果图:

动态设置标题内容------调用wx.setNavigationBarTitle( Object object)动态设置当前页面的标题

onLoad( Object query)页面加载时触发,可以在onLoad的参数中获取打开当前页面路径中的参数

onReady()页面初次渲染完成时触发,注:在对界面内容进行设置的API如:wx.setNavigationBarTitle,请在onReady()之后进行

注:如图可以看到之前home.wxml中导航栏都会传递一个参数------所以能实现动态传参

  1. 在data中申请一个数组query:{}
  • 在生命周期函数onLoad中获取到页面传过来的参数,将值赋给query数组

  • 在onReady()中调用wx.setNavigationBarTitle------将query中的参数赋值给wx.setNavigationBarTitle函数的属性项title

    效果图:

分页的形式,加载指定分类下商铺列表的数据------由于请求不到数据所以我用的假数据实现的------节流处理和数据请求可以看我上一篇文章------这里只实现洗车店列表

这个请求函数不实现

(1)接口地址

  • url
  • url地址中的:cate_id是动态参数,表示分类的id (2)请求方式
  • GET请求 (3)
  • _page表示请求第几页的数据
  • _limit表示每页请求几条数据

洗车店例表数据实现效果图:

在wxml中编写

html 复制代码
!--pages/car_service/car_service.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
  <view class="thumb">
      <image src="{{item.icon}}"></image>
  </view>
  <view class="info">
    <text class="shop-title">店名:{{item.name}}</text>
    <text>电话:{{item.phone}}</text> 
    <text>地址:{{item.adress}}</text> 
  </view>


</view>

在js中编写假数据------黑马的url有效但是没有数据所有导致,只能这样

代码如下:

javascript 复制代码
/**
   * 页面的初始数据
   */
  data: {
    qurey:{},
    shopList:[
      {'id':'1','name':'洗车店1','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'2','name':'洗车店2','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'3','name':'洗车店3','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'4','name':'洗车店4','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'5','name':'洗车店5','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'6','name':'洗车店6','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'7','name':'洗车店7','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'8','name':'洗车店8','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'},
      {'id':'9','name':'洗车店9','phone':'12345679','adress':'世界上的某一个地方','icon':'/images/car_png/car_service1.jpg'},
      {'id':'10','name':'洗车店10','phone':'12345678','adress':'世界上的某一个地方','icon':'/images/car_png/car_service2.jpg'}

    ],
    page:1,
    pageSize:10,
    total:0,

在wxss中编写样式:

css 复制代码
/* pages/car_service/car_service.wxss */
.shop-item{
  display: flex;
  padding: 15rpx;
  border: 1rpx solid #efefef;
  margin:15rpx;
  border-radius: 8rpx;
  box-shadow: 1rpx 1rpx 15rpx #ddd;

}
.thumb image{
  width: 250rpx;
  height: 250rpx;
  display:block;
  font-size:24rpx;
  margin-right: 15rpx;

}


.shop-title{
  font-weight: bold;
}

.info{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

判断数据是否加载完成------代码样式------调用wx.showToast( Object object)

判断公式:page*pageSize>=( 大于等于)total

javascript 复制代码
 /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
	  //判断是否在加载数据
	   if(this.data.page*this.data.pageSize>=this.data.total){
			//证明没有下一个数据
			return wx.showToast({
					title:"数据加载完毕!"
					icon:"none"
					})
				}

      //页码值加+1
      this.setData({
        page:this.data.page+1
      })

      this.getSopList()//数据请求函数
  },

下拉刷新------onPullDownRefresh函数中实现

(1)//需要重置的数据

(2)//重新发起请求

(3)下拉刷新关闭加载版面------在函数wx.stopPullDownRefresh()

注:在上拉加载的时候不需要关闭------在下拉刷新的时候才需要关闭加载面板------通过回调函数来实现,------在onPullDownRefresh函数中传递一个回调函数

使用wxs处理手机号

相关推荐
HerayChen25 分钟前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
莯i生活39 分钟前
“漫步北京”小程序及“气象景观数字化服务平台”上线啦
生活
中云DDoS CC防护蔡蔡7 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼10 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857513 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027713 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__19 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
2301_775281191 天前
法语旅游常用口语-柯桥学外语到蓝天广场泓畅学校
学习·生活·旅游
Hotchip华芯邦科技1 天前
MEMS硅麦克风应用电子烟雾化产业稳步爬升,耐高温、 防油、防酸、防腐蚀等性能优势和可实现自动化贴片及极高的一致性等特性使其必将成为主流
科技·单片机·金融·生活·社交电子·健康医疗·制造
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序