|
源码下载地址 ：Github
效果图如下：
分析一下页面，主要内容分为顶部轮播，中间10个分类图标的排版和单击事件，下部列表下拉刷新上拉加载更多。大部分知识点前面都讲过。这里主要说一下微信小程序中的数据绑定，前后台传值以及加载更多时的数据合并。
1. 数据绑定和前后台传值
中间分类图标的布局文件：
<view class="items" wx:for="{{array}}" wx:for-item="item" bindtap="typeclick" data-code="{{item.code}}" data-text="{{item.text}}" >
<image class="item-img" mode="aspectFit" src="{{item.src}}"></image>
<view class="item-text">{{item.text}}</view>
</view>
|
可以看出是以 控制属性 wx:for 绑定数据 array 来循环渲染布局，并对view绑定了单击事件bindtap="typeclick"。因为每一个分类点击都会刷新下部列表，所以需要在事件中获得当前分类数据的code。小程序中提供自定义标签 data-XXX，供开发者使用来绑定数据，XXX 可以随意取名，这里我们用 data-code="{{item.code}}" data-text="{{item.text}}"把每条数据的code和text传给function typeclick。
然后在js中的 typeclick 函数中，我们可以通过event拿到绑定的数据。
-
// 分类item单击事件
typeclick: function (e) {
total = 0;
code = e.currentTarget.dataset.code + "";
var name = e.currentTarget.dataset.text + "";
this.data.dataArray = [];
this.setData({
title: "附近三公里: " + name
})
this.periphery();
},
|
e.currentTarget.dataset.code 后边的code就是我们在布局文件中定义的 data-XXX 中的XXX，这里需要注意一下，因为js的机制，有时候我们拿到的数据类型可能不对，需要自己处理一下。
2. 加载更多时的数据合并
// 网络请求
periphery: function () {
var that = this
//sliderList
wx.request({
url: 'https://xxx',
method: 'POST',
data: {
city: "深圳",
code: code,
count: count + "",
total: total + "",
lat: app.globalData.latitude + "",
lng: app.globalData.longitude + ""
},
|
|
