小程序自定义组件:下拉刷新、上拉加载组件、搜

在页面或组件中json文件的usingComponents下引入scroll

usingComponents:{ /*假设组件放在这个路径*/ "scroll":'/lib/components/scroll/index' }

Page({ //下拉刷新 onPullDown(){ //TODO数据方法 }, //上拉加载更多 onPullUp(){ //TODO数据方法 } })

在template中使用

<scroll id="scroll" open="all" bind:pulldown="onPullDown" bind:pullup="onPullUp"> <!-- 这里写你的列表代码 --> </scroll>

组件方法

组件监听事件(事件前面记得加bind)

样例代码仅供参考

let component = null; Page({ data:{ list: [] }, //页面初始化 onLoad(){ //获取组件对象 component = this.selectComponent('#scroll'); //显示loading component.startLoad(); //请求第一页数据 this.loadData(true).then(() => { //数据请求完成后需要调用该方法结束loading component.stopLoad(); }); }, //加载数据 loadData:function(reset = false) { ... }, //下拉刷新 onPullDown:function() { //请求第一页数据 this.loadData(true).then(() => { //数据请求完成后需要调用该方法结束loading component.stop(); }); }, //上拉加载更多 onPullUp:function() { //显示loading component.startLoad(); //加载下一页数据 this.loadData().then(() => { //数据请求完成后需要调用该方法结束loading component.stopLoad(); }); } }) search使用说明

在页面或组件中json文件的usingComponents下引入search

usingComponents:{ /*假设组件放在这个路径*/ "search":'/lib/components/search/index' }

Page({ data:{ //组件对象 searchElem:null }, onLoad(){ //获取组件对象实例 const searchElem = this.selectComponent('#search'); this.setData({searchElem}); }, //打开搜索栏 openSearch(){ //可直接调用显示搜索栏或传参调用 //this.searchElem.show(); //传过去的参数会直接显示在打开的搜索界面输入框内 this.searchElem.show('司马光'); //TODO }, //搜索回调 onSearch({detail}){ let data = detail.value; //TODO } })

在template中使用

<search id="search" key="case-search" radius="36" placeholder="搜索名称" bind:search="onSearch" />

组件方法

组件监听事件(事件前面记得加bind)

该组件是为了解决picker组件省市区选择器不能只选择省市2级问题而设计

在页面或组件中json文件的usingComponents下引入picker-region

usingComponents:{ /*假设组件放在这个路径*/ "picker-region":'/lib/components/picker-region/index' }

//该数据也可用其他方式获取 import regions from './region-data' Page({ data:{ /** * 地区数据 */ regionList:[], //默认显示的地区(为空则显示第一项) region:[], }, onLoad(){ this.setData({regionList:regions}); }, //地区选择监听 onChange({detail}){ let values = detail.value;//选择的下标值,格式为:[0,0] let names = data.names;//选择的省市名称,格式为:['北京市','北京市'] //TODO } })

在template中使用

<picker-region regionList="{{regionList}}" value="{{region}}" containsAll bind:change="onChange"> <!-- 默认情况下点击组件内包含的内容就会显示选择器 --> <view>选择地区</view> </picker-region>

组件方法

组件监听事件(事件前面记得加bind)

时间区间选择组件

在页面或组件中json文件的usingComponents下引入picker-range-month

usingComponents:{ /*假设组件放在这个路径*/ "picker-range-month":'/lib/components/picker-range-month/index' }

//该数据也可用其他方式获取 Page({ data:{ /** * 默认设置的开始时间-结束时间,格式为:[开始年份, 开始月份, 结束年份, 结束月份] */ date:[2017, 5, 2018, 6], }, onLoad(){}, //地区选择监听 onChange({detail}){ let date = detail.value; date.start.year;//开始年份 date.start.month;//开始月份 date.end.year;//结束年份 date.end.month;//结束月份 //TODO } })

在template中使用

<picker-range-month bind:change="onChange" value="{{date}}"> <!-- 默认情况下点击组件内包含的内容就会显示选择器 --> <view class="name">选择日期区间</view> </picker-range-month>

组件方法

组件监听事件(事件前面记得加bind)