小程序如何实现自动加载
这篇文章主要介绍了小程序如何实现自动加载,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
“只有客户发展了,才有我们的生存与发展!”这是创新互联建站的服务宗旨!把网站当作互联网产品,产品思维更注重全局思维、需求分析和迭代思维,在网站建设中就是为了建设一个不仅审美在线,而且实用性极高的网站。创新互联对成都网站设计、成都网站制作、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。
小程序实现自动加载的完整代码
售中({{count}}) 已售({{counts}}) {{item.goods_name}} ¥ {{item.price}} {{item.goods_name}} x{{item.goods_number}}件 ¥ {{item.goods_price}} 商品加载完毕 /* //顶部 */ .head { position: relative; width: 100%; height: 60rpx; flex-direction: row; display: flex; align-items: center; /* left: -20rpx; */ border-bottom: 1.4px #e6e6e6 solid; border-top: 1.4px #e6e6e6 solid; } .head view { position: relative; /* margin-left: 52rpx; */ font-size: 27rpx; color: #414141; display: flex; justify-content:center; width: 50%; } .line{ border-bottom:1.4px #414141 solid; } /*主体 */ .shop-middle{ position: relative; height: 170rpx; width: 100%; border-bottom: 1.4px #e6e6e6 solid; border-top: 1.4px #e6e6e6 solid; padding-top:10rpx; } .shop_rank image{ position: relative; height:32rpx; width:74rpx; } .shop-img { display: flex; flex-direction: row; width: 25%; font-size: 29rpx; } .shop-img image { height:160rpx; width:160rpx; margin-right:22rpx; } .shop-num { justify-content: space-between; position: absolute; left: 200rpx; width: 75%; display: flex; flex-direction: column; font-size: 25rpx; top:0rpx; } .shop-num view { position: relative; margin-top: 15rpx; overflow: hidden; } .but_all{ position:relative; left:620rpx; top:-50rpx; } .is-show{ position: relative; width: 100%; height: 70rpx; display:flex; justify-content:center; align-items:center; font-size:28rpx; /* border-top:1.4px #e6e6e6 solid; */ } .is-hide{ display: hidden; } var app = getApp() var com = require('../../../utils/util.js') Page({ /** * 页面的初始数据 */ data: { show: 'is-hide', page:0, pages:0, a: 'line', b: '', goods_list:[], count:0, counts:0, choose:1, order_list:[] }, // 头部 clickorder(e) { var that = this console.log(e) var id = e.currentTarget.dataset.order if (id == 1) { that.setData({ a: 'line', b: '', c: '', d: '', e: '', f: '', choose:1 }) that.index(that.data.store_id,that.data.page); } else if (id == 2) { //待付款 var that = this that.setData({ a: '', b: 'line', c: '', d: '', e: '', f: '', choose:2 }) that.getindex(that.data.page) } }, //获取全部订单 getindex: function (page) { var that = this; var list = that.data.order_list; console.log(list) var lists = []; var key = wx.getStorageSync('key') console.log(that.data.page) that.setData({ key: key }) com.POST({ url: 'Order/wait_pay_all', data: { key: that.data.key, pay_status: 2, shipping_status: 1, order_status: 1, limit:10, page:page }, success: function (msg) { console.log(msg.data.datas) if (msg.data.code == 200) { lists = list.concat(msg.data.datas) that.setData({ page:that.data.page+1, counts: msg.data.datas[0].countsss, order_list: lists, show: 'is-show' }) } else { // wx.showToast({ // title: '暂无订单', // icon: 'none', // duration: 2000 // }) } } }) }, //上架 onsale(e){ var goods_id=e.currentTarget.dataset.goods //最新 var that = this wx.getStorage({ key: 'key', success: function (res) { com.POST({ url: 'Goods/on_sale', data: { key: res.data, goods_id: goods_id }, success: function (msg) { console.log(msg) if (msg.data.code == 200) { wx.showModal({ title: '温馨提示', content: msg.data.datas, success: function (res) { if (res.confirm) { wx.switchTab({ url: '/pages/my/index' }) } } }) } else { wx.showModal({ title: '温馨提示', content: msg.data.error, success: function (res) { if (res.confirm) { wx.switchTab({ url: '/pages/my/index' }) } } }) } } }) } }) }, //设计师所有的商品 index(options,page){ //最新 var that = this var list = that.data.goods_list; var lists = []; console.log(that.data.page) wx.getStorage({ key: 'key', success: function (res) { com.POST({ url: 'Goods/goods_list', data: { key: res.data, store_id: options.store_id, limit: 10, page: page, is_sale: 1 }, success: function (msg) { console.log(msg) if (msg.data.code == 200) { lists = list.concat(msg.data.datas) console.log(lists) that.setData({ page:that.data.page +1, goods_list: lists, count: msg.data.datas[0].count, show: 'is-show' }) // wx.startPullDownRefresh(); } else { // wx.showModal({ // title: '温馨提示', // content: msg.data.error, // success: function (res) { // if (res.confirm) { // // wx.switchTab({ // // url: '/pages/index/index' // // }) // } // } // }) } } }) } }) }, /** * 生命周期函数--监听页面加载 */ onShow: function (options) { this.index(this.data.store_id, this.data.pages) this.getindex(this.data.pages) }, onLoad: function (options){ this.setData({ store_id: options }) this.index(options, this.data.pages) this.getindex(this.data.pages) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, //滚动到底部触发事件 onReachBottom: function () { let that = this; console.log("上拉", that.data.pages) // if (that.data.searchLoading && !that.data.searchLoadingComplete) { that.setData({ pages: that.data.pages + 1, //每次触发上拉事件,把searchPageNum+1 // isFromSearch: false //触发到上拉事件,把isFromSearch设为为false }); // console.log(that.data.counts, that.data.count) if (that.data.choose==2){ that.getindex(that.data.pages) } else if (that.data.choose == 1){ that.index(that.data.store_id, that.data.pages) } }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { wx.stopPullDownRefresh() }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
感谢你能够认真阅读完这篇文章,希望小编分享的“小程序如何实现自动加载”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站标题:小程序如何实现自动加载
网址分享:http://myzitong.com/article/jdcesd.html