- 截图组件(修正版,上篇删了,有bug)
刚才发的截图时发生错位,现在重新发 https://developers.weixin.qq.com/s/hzVM3BmU7Paz 以后有时间会出一整套原生的框架,开源 开源 开源,希望大神指点一二
2019-08-14 - 如何快速开发一个小程序列表页面
common_list.js:一个放着重复代码的文件。刷新onPullDownRefresh、加载onReachBottom、设置列表数据setList,这三个方法是最基础的,当然如果业务还有其他的方法也可以放到这个文件。 [代码]//common_list.js module.exports = { data: { page: 1, loadend: false, list: [], listLength: 0 }, onPullDownRefresh() { // console.log(11111) this.setData({ page: 1, loadend: false }) this.getList(true); setTimeout(function () { wx.stopPullDownRefresh(); }, 200); }, onReachBottom() { if (this.data.loadend) return this.setData({ page: ++this.data.page }); this.getList(); }, /** * initType 刷新为true,加载为false或undefined * list 初始/加载的数据 * loadend 数据库加载完毕 */ setList(initType, list) { if (initType) { this.setData({ list: list.length ? [list] : [], listLength: list.length ? 1 : 0 }); return } if (!list.length) { this.setData({ loadend: true }) return } let len = this.data.list.length; this.setData({ [`list[${len}]`]: list, listLength: len + 1 }); }, // 返回顶部 onScrollTop() { wx.pageScrollTo({ scrollTop: 0, }); }, } [代码] app.js:小程序全局配置,把公共方法放到这。 [代码]//app.js module.exports = { listMix: require("./common_list.js"), http,//自己封装的wx.request } [代码] mypage.js mypage.wxml:业务页面 [代码]//mypage.wxml <block wx:for="{{list}}" wx:for-item="listItem" wx:for-index="pid" wx:key="{{pid}}"> <block wx:for="{{listItem}}" wx:for-item="item" wx:for-index="cid" wx:key="{{cid}}"> <item item="{{item}}" pid="{{pid}}" cid="{{cid}}"></item> </block> </block> <!-- 数据加载完毕 --> <divider content="数据已完全加载" wx:if="{{loadend}}" /> [代码] [代码]//mypage.js const App = getApp(); Page({ ...App.listMix, data:Object.assign(App.listMix.data,{}), async getList(initType){ let {page} = this.data; let data = {page} let res = await App.http('url', data); this.setList(initType, res.list); }, }) [代码]
2019-08-12