众所周知，微信小程序使用的是MVVM框架。通过数据绑定，可以实时分析视图的内容，从而显示不同的内容。以下是一个经常使用的功能，即如果在微信小程序中加载商品列表功能，当用户向下滑动时，商品会被连续加载。 似乎js文件首先: 1.初始化参数 数据:{ P: 1，//目前是第几页？ List: []，//产品数据的数组 HasMoreData: true，//是否需要加载更多内容？ }, 再看onLoad函数，就是加载一个getProlist函数。 2.onLoad:函数(选项){ 变那个=这个 that . getprolist(& # 39；加载数据...') }, 3.getProlist:函数(消息){ wx.showLoading({ 标题:消息，//提示正在加载 }) 变那个=这个 var p = that.data.p //加载新产品 var request _ new pro _ URL = util . geta piurl(app，& quot/GList/new pro & quot；，& quot& ampp = & quot+ p) util。_get(request_newpro_url， 功能(资源){ wx . hide loading()；//关闭提示 var list = that . data . list；//获取列表的值 If (list == false) {//如果数据为空，则列表等于加载的数据。 var data_list = res.data.data }否则{ var list2 = res.data.data var data _ list = list . concat(list 2)；//因为list不是空的，所以需要把list和list2这两个数组合起来，然后把值赋给data_list。 } //如果页数等于当前页，则不要再次加载 if(RES . data . page _ count & lt；= res.data.p) { that.setData({ hasMoreData: 0， }) } that.setData({ page_count: res.data.page_count List: data_List //将data_list绑定到list，这样用this.data.list获取list时，又是一个新数组。 }) }, 功能(资源){ wx . hide loading()； wx.showToast({ 标题:res.errMsg， 持续时间:2000年 }) } ) }, //页面相关事件处理函数——监控用户的下拉动作。 4 . onpulldownresh:function(){ this . getprolist(& # 39；刷新数据& # 39；) }, //页面上底部事件的处理函数 5.onReachBottom: function () { 变那个=这个 var p = that.data.p If (that.data.hasMoreData) {//判断hasMoreData是否在等待1，如果不等于1，则不再调用getProlist函数，也就是说加载在某个时刻完成。 that.setData({ p:数字(p) + 1， }) this . getprolist(& # 39；加载更多数据& # 39；) }否则{ wx.showToast({ 标题:& # 39；没有更多的数据& # 39；, }) } }, 我们来看看后台的程序部分。还是比较简单的，使用thinkphp框架: 公共函数newpro(){ $ URL _ arr[& # 39；地位& # 39；] = 1;//查询条件 $ page = 6；//一次加载多个产品 $ p = I(& # 39；request.p & # 39,1);//什么页面？ $ pagesize =($ p-1)* $ page；//您想装载多少件产品？ $ list = $ model goods-& gt；其中($ URL _ arr)-& gt；订单(& # 39；order_id asc，goods _ id desc & # 39；)-& gt；limit($pagesize，$ page)-& gt；select()；//获取查询到的数据 $ total _ count = $ model goods-& gt；其中($ URL _ arr)-& gt；订单(& # 39；order_id asc，goods _ id desc & # 39；)-& gt；count()；//计算所有合格产品的总数 $ page _ count = ceil($ total _ count/$ page)；//所有产品有多少页，四舍五入？ $ data[& # 39；p & # 39]= $ p； $ data[& # 39；total _ count & # 39]= $ total _ count； $ data[& # 39；page _ count & # 39]= $ page _ count； $ data[& # 39；数据& # 39；]= $ list； $ this-& gt；响应($data，C(& # 39；API _ TYPE & # 39));//将这些参数传递给微信小程序 } 这个函数也使用了小程序MVVM的思想。通过后台加载的数据，将数据一次又一次的连接起来，形成更多的数据，让访问者舒适的查看内容变化，形成良好的浏览体验。 寒武纪. render(“尾巴”)

本文由“云崛起”原创发布，未经许可，禁止转载！本文原创链接：http://www.yunjueqi.com/weixinfenxiao/2478.html