-
2022-01-10 17:09:14
微信小程序下拉加载数据更多,使用到分页查询的原理,当用户下拉加载的时候触发事件,获取待处理数据 ,将待处理数据添加到数据组中。以下仅是自己实现的一种方式,可供参考
示例如下:<template> <view> <view v-for="(item,index) in listData" :key="index"> <view>{{item}}</view> </view> <view v-if="showMore"> <uni-load-more :status="status" :content-text="contentText" color="#969799" @clickLoadMore="getMore()"/> </view> <view class="noData" v-if="!showMore ">暂无数据</view> </view> </template>
<script> export default { data() { return { page: 1, pagesize: 10, content: "暂无数据", status: 'more', statusTypes: [ { value: 'more', text: '加载前' }, { value: 'loading', text: '加载中' }, { value: 'noMore', text: '没有更多' } ], contentText: { contentdown: '查看更多', contentrefresh: '加载中', contentnomore: '没有更多' }, showMore: true, listData: [], // 存放待处理数据 upLoadData: [], //存放数据组 } }, onLoad(option) { //获取初始化数据 this.search(); }, methods: { getMore() { this.upLoadData = []; //当前数据大于等于总数据条数停止继续加载 if (this.upLoadData.length >= this.total) { this.status = 'noMore'; this.showMore = true; } else { this.status = 'loading' uni.showNavigationBarLoading(); this.page++; //当前页码加1 this.request({ url: '/getList', method: 'POST', data: {} }).then(res => { uni.hideLoading(); if (res.code === 200) { this.showMore = true; //将接口获取的存在待处理数据列表中 this.upLoadData = res.data; //计算出总页码数 向上取整 let totalPage = Math.ceil(this.total / this.pagesize) //当前页码大于总页码数 停止继续加载 if (this.page > totalPage) { this.status = 'noMore' uni.hideNavigationBarLoading() } else { //反之在一秒后将待处理数据添加到数据组中 setTimeout(res => { this.listData = this.listData.concat(this.upLoadData); this.status = 'more'; uni.hideNavigationBarLoading(); }, 1000); } } else { this.showMore = false; } }).catch(error => { console.log("请求失败:", error) }) } }, search() { this.request({ url: '/getList', //接口地址 method: 'POST', data: {} // 请求参数 }).then(res => { if (res.code === 200) { this.listData = res.data // 获取初始化数据 this.total = res.total // 获取总数据条数 } }) }, } } </script>
更多相关内容 -
微信小程序 下拉列表的实现实例代码
2020-08-31 03:50:54主要介绍了微信小程序 下拉列表的实现实例代码的相关资料,需要的朋友可以参考下 -
微信小程序实现列表下拉刷新上拉加载
2020-11-26 16:58:32本文实例为大家分享了微信小程序实现列表下拉刷新上拉加载的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载... -
微信小程序 下拉菜单简单实例
2020-08-30 20:10:53主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下 -
微信小程序 下拉菜单的实现
2020-08-30 22:07:38主要介绍了微信小程序 下拉菜单的实现的相关资料,需要的朋友可以参考下 -
微信小程序之下拉列表实现方法解析(附完整源码)
2020-12-09 10:45:34跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果。然后下拉的动画的通过 css3 的 animation 来实现的。 CSS3... -
微信小程序 input表单与redio及下拉列表的使用实例
2020-08-29 08:48:44主要介绍了微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下 -
微信小程序中的上拉、下拉菜单功能
2020-11-21 14:40:12上下拉菜单在微信小程序中起提示、选项的功能,当点击它时会弹出属于这个菜单的相应选项。使用vant组件库,将 dist 文件提前下载好然后保存到项目中。在小程序中调用组件库,并在正确引用就可以实现了菜单功能了。 ... -
微信小程序 select 下拉框组件功能
2020-10-16 10:40:58主要介绍了微信小程序 select 下拉框组件功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 -
微信小程序实现无限滚动列表
2021-01-03 09:36:19本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下 效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical=‘true’设置同时显示的滑块数量:display-... -
微信小程序自定义下拉框实现根据输入过滤下拉项.zip
2021-08-20 16:03:11微信小程序自定义下拉框实现根据输入过滤下拉项 -
微信小程序 scroll-view组件实现列表页实例代码
2020-11-27 04:22:20scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧! 为app导入新page页面 首先需要为我们的小... -
微信小程序select下拉框实现效果
2020-11-26 12:52:20小程序中是没有h5中的下拉 标签的 所以要实现下拉功能就必须自己动手写拉 这里为了更清楚的显示层级 就把源码直接复制过来了 商品金额 ¥99.00 <!--下拉框 --> <text>{{tihuoWay}} <image ... -
微信小程序下拉刷新,上拉加载及下拉列表制作
2021-03-29 20:00:46小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是... -
微信小程序中下拉选择中带手动输入搜索的实现
2022-02-10 08:29:41微信小程序中下拉选择中带手动输入搜索的实现 -
微信小程序实现城市列表选择
2020-12-10 11:52:01本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下 实现效果预览 实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app... -
微信小程序自定义select下拉选项框组件的实现代码
2021-01-03 08:26:53微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了。 ... -
微信小程序列表下拉刷新加载更多
2018-05-04 11:42:19微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多微信小程序列表下拉刷新加载更多 -
微信小程序根据下拉列表发送指令
2022-06-29 13:40:43 前段时间在忙着考试和做项目,导致很久一段时间没更新,今天就浅浅更新一下,因为做项目需要下发很多命令,一开始是写了按钮事件,但是按键太多导致页面不美观简洁,后面想了一下用下拉列表来实现,这样界面就... 前段时间在忙着考试和做项目,导致很久一段时间没更新,今天就浅浅更新一下,因为做项目需要下发很多命令,一开始是写了按钮事件,但是按键太多导致页面不美观简洁,后面想了一下用下拉列表来实现,这样界面就好看多了。
然后发现微信小程序下拉列表只能自己自定义,微信开发者工具没有提供这个组件。网上查看了一下资料,我下面的代码是在另外一个博主的基础上扩展的。
可以直接点这个链接过去看他的博客https://blog.csdn.net/wolf6699/article/details/107915020?可以看到他做的是这样的界面
我在其基础实现这样的界面
这里我着重讲解一下按钮怎么获取下拉列表的下标数组以及相应的指令文字。界面设计我就不讲太多,以免侵权。文章末尾我会放置源码链接,大家可以看源码学习。
接下来我们看index.js里面的代码,首先,我们先记住初始数据里面的几个值,为下面调用做准备。selectData是列表数据,index是列表下标值,这里可以决定下拉列表收起时显示的一个值。
data: { show:false,//控制下拉列表的显示隐藏,false隐藏、true显示 selectData:['控制指令','开灯','关灯','打开风扇','关闭风扇','打开窗帘','关闭窗帘','打开加湿器','关闭加湿器'],//下拉列表的数据 index:0,//选择的下拉列表下标 Index:0 },
接下来是按钮的事件函数。我在index.js定义的send函数就是它的事件函数。首先我们要怎么获取到下拉列表的下标呢?直接var index =index;是不行的,这里我们可以调用微信小程序提供的一个函数getCurrentPages(),可以看到这样我们可以获取当前页面的数据
接下来就是找到下标值和指令文字 ,select是下标值 postdata 是指令文字
var select =sele[sele.length-1].data.index; var postdata=sele[sele.length-1].data.selectData[select];
下来列表那么多指令,一个一个写肯定很繁琐,这里用switch来判断,就很方便
switch(select){ case 1:console.log(postdata);break; //打开灯 case 2:console.log(postdata);break;// 关闭灯 case 3:console.log(postdata);break; //打开风扇 case 4:console.log(postdata);break;//关闭风扇 case 5:console.log(postdata);break;//打开窗帘 case 6:console.log(postdata);break;//关闭窗帘 case 7:console.log(postdata);break; //打开加湿器 case 8:console.log(postdata);break; //关闭加湿器 default: ;break; }
打开微信开发者工具的调试器就可以看到我们发送的相关指令,要应用于实际应用只需要把console.log(postdata);改成你想要发送的函数就可以了
百度网盘链接
链接:https://pan.baidu.com/s/1_kqo9NbKZSmvpsCaUz2Upw
提取码:y4pw
-
微信小程序三级联动选择器使用方法
2020-08-28 02:23:02主要为大家详细介绍了微信小程序三级联动选择器使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序--自定义下拉列表
2022-03-28 16:29:21} custom-drop-down/index.js // pages/component/custom-drop-down/index.js Component({ /** * 组件的属性列表 */ properties: { option2: { type: Array, value: [ { text: '默认排序', value: 'a' }, { text: '...custom-drop-down/index.wxml
<!--pages/component/custom-drop-down/index.wxml--> <view style="position: relative; display: flex; flex-direction: column;"> <view style="display:flex; align-items: center; border:black 1px solid" bindtap="clickShow"> <view class="dropdown-value">{{provinceValue}}</view> <image src="./../../../images/arrow-down.png" class="dropdown-image"></image> </view> <view style="height: 100px; border:darkgray 1px solid" wx:if="{{show}}"> <scroll-view style="height: 100px;" scroll-y="ture"> <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item"> {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image> </view> </scroll-view> </view> </view>
custom-drop-down/index.wxss
/* pages/component/custom-drop-down/index.wxss */ .dropdown-item { margin: 10px 10px; } .dropdown-item-img { float: right; right: 15px; width: 16px; height: 16px; } .dropdown-image { width: 16px; height: 16px; } .dropdown-value { flex: 1;padding-left: 5px; }
custom-drop-down/index.js
// pages/component/custom-drop-down/index.js Component({ /** * 组件的属性列表 */ properties: { option2: { type: Array, value: [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ] }, show: { type:Boolean, value:false } }, /** * 组件的初始数据 */ data: { provinceValue:'排序' }, /** * 组件的方法列表 */ methods: { clickShow: function() { this.setData({ show:!this.data.show }) }, selectIndex: function(option) { console.log('selectIndex',option); let index = option.currentTarget.dataset.index; console.log('selectIndex====',this.data.option2[index].text); for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(i == index) { item.selected = true; } else { item.selected = false; } } this.setData({ provinceValue:this.data.option2[index].text, option2:this.data.option2, show:false }) } } })
custom-drop-down/index.json
{ "component": true, "usingComponents": {} }
调用:
<custom-dropdown option2="{{option2}}"></custom-dropdown>
-
微信小程序之自定义下拉列表框(新)
2022-05-10 16:59:38下拉列表中的值选中后,关闭列表,再打开,值可记忆,并显示相应的选中样式 .wxml <!--pages/component/custom-drop-down/index.wxml--> <view class="drop-container"> <view class="drop-main...下拉列表中的值选中后,关闭列表,再打开,值可记忆,并显示相应的选中样式
.wxml
<!--pages/component/custom-drop-down/index.wxml--> <view class="drop-container"> <view class="drop-main" bindtap="clickShow"> <view class="dropdown-value">{{provinceValue}}</view> <image src="./../../../images/arrow-down.png" class="dropdown-image"></image> </view> <view class="list-style" wx:if="{{show}}"> <scroll-view style="height: 100px;" scroll-y="ture" bindscrolltolower='loadMore'> <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item"> {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image> </view> </scroll-view> </view> </view>
.js
// pages/component/custom-drop-down/index.js Component({ /** * 组件的属性列表 */ properties: { option2: { type: Array, value: [ { text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }, ] }, show: { type:Boolean, value:false }, selectedData: { type:Object, value:{} } }, /** * 组件的初始数据 */ data: { provinceValue:'请选择' }, /** * 组件的方法列表 */ methods: { clickShow: function() { this.setData({ show:!this.data.show }) }, selectIndex: function(option) { console.log('selectIndex',option); let index = option.currentTarget.dataset.index; console.log('selectIndex====',this.data.option2[index].text); for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(i == index) { item.selected = true; } else { item.selected = false; } } this.setData({ provinceValue:this.data.option2[index].text, option2:this.data.option2, show:false }) this.triggerEvent('getvalue',this.data.option2[index]) }, selectedValue(name) { for(let i=0;i<this.data.option2.length;i++) { let item = this.data.option2[i]; if(item.text == name) { item.selected = true; } else { item.selected = false; } } this.setData({ option2:this.data.option2 }) }, loadMore(e) { console.log('loadMore',e); } }, lifetimes:{ attached() { if(Object.keys(this.data.selectedData).length === 0) { console.log('attached 111111'); } else { this.selectedValue(this.data.selectedData.text) this.setData({ provinceValue:this.data.selectedData.text }) } // this.setData({ // provinceValue:this.data.option2[0].text // }) } } })
.wxss
/* pages/component/custom-drop-down/index.wxss */ .drop-container { position: relative; display: flex; flex-direction: column; } .drop-main { display:flex; align-items: center; background: white; border: 1px solid #dfdfe2; border-radius: 5px; height: 32px; width: 100%; } .dropdown-item { margin: 10px 10px; } .dropdown-item-img { float: right; right: 15px; width: 16px; height: 16px; } .dropdown-image { width: 16px; height: 16px; margin-right: 8px; } .dropdown-value { flex: 1; padding-left: 16px; font-size: 12px; } .list-style { height: 100px; border:darkgray 1px solid; position: absolute; background-color: white; top:33px; width: 100%; z-index: 100; border-radius: 2px 2px 5px 5px; font-size: 14px; }
使用组件:
<custom-drop-down id="areaDrop" option2="{{shopList}}" selectedData="{{selectShop}}" bindgetvalue="getShopValue"></custom-drop-down>
options2是下拉列表的值,selectedData是记忆选中的值,再次打开下拉列表,该值将是选中状态
-
微信小程序下拉列表菜单
2018-12-01 10:26:14效果图: 1.wxml 2.wxss .list-msg { padding: 0 10rpx; background-color: #fff; position: relative; width: 90%; margin: 30rpx auto; } .list-msg .list-msg2 { ...display: ... -
微信小程序select下拉框实现
2020-10-16 01:04:22主要介绍了微信小程序select下拉框实现源码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 -
微信小程序下拉菜单组件实现
2021-01-02 13:46:30先看需求和效果,移动端设计比较常用的下拉菜单,主要用于筛选查询列表结果。下拉菜单的样式可以根据自己的具体需求进行修改。...我在小程序开发的过程中也开发了许多组件,可以在我的gitee地址中去查看,所有组件的 -
微信小程序实现下拉框功能
2020-10-16 17:04:10主要为大家详细介绍了微信小程序实现下拉框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
微信小程序实现下拉菜单切换效果
2021-01-03 08:06:59本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> ...