阿东入门系列五仿找事吧app附近三公里demo.pdfVIP

阿东入门系列《五》仿找事吧APP 附近三公里Demo 源码 地址 ：Github 效果图如下： 分析一下页面，主要内容分为顶部轮播，中间 10 个分类图标的排版和单击 ，下部列表下拉刷新上拉加载更多。大 部分知识点前面都讲过。这里主要说一下微信小程序中的数据绑定，前 传值以及加载更多时的数据合并。 1. 数据绑定和前 传值 中间分类图标的布局文件： view class=items wx:for ={{array}} wx:for-item=item bindtap=typeclick data-code={{item.co de}} data-tex em.text}} image class=item-img mode=aspectFit src={{item.src}}image view class=item-tex em.text}}view view  1  2  3  4 可以看出是以 控制属性 wx:for 绑定数据 array 来循环渲染布局，并对 view 绑定了单击 bindtap=typeclick。因为每一个分类点击都会刷新下部列表，所以需要在 中获得当前分类数据的 code。小程 序中提供自定义标签 data-XXX ，供开发者使用来绑定数据，XXX 可以随意取名，这里我们用 data- code={{item.code}} data-tex em.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 ({ le: 附近三公里: + name }) this.periphery (); },  1  2  3  4