微信小程序申请_微信小程序列表烘托功用之列表下拉改写及上拉加载的完成方

  • 栏目:行业动态 时间:2021-01-11 11:37 分享新闻到:
<返回列表

微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析       这篇文章主要介绍了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法,结合实例形式分析了微信小程序列表下拉刷新及上拉加载的相关实现方法与技巧操作,需要的朋友可以参考下

本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法。分享给大家供大家参考,具体如下:

微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把。微信小程序和vuejs有些像,都是数据驱动视图 单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理。本文将分享微信小程序列表的下拉刷新和上划加载的实践。

效果图

首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画、下拉刷新结果、上划加载动画以及上划加载结果,程序中的数据均为模拟数据,不包含网络请求,所以可以直接运行。

方法一:用scroll-view组件实现

由于最后没有选择这种实现方法(下拉刷新有bug),因此只做简单介绍,当然如果没有下拉刷新的需求,scroll-view组件实现列表的渲染很方便,从可以看到,scroll-view组件集成了以下方法为编程提供很大便捷。

scroll-into-view String 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

方法二:用page页面自带的功能

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

1、在app.json页设置窗口前景色为dark 允许下拉

"window":{
 "backgroundTextStyle":"dark",
 "navigationBarBackgroundColor": "#000",
 "navigationBarTitleText": "wechat",
 "navigationBarTextStyle":"white",
 "enablePullDownRefresh": true

2、在list.json页设置允许下拉

 "enablePullDownRefresh": true

3、利用onPullDownRefresh监听用户下拉动作

注:在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动无法触发onPullDownRefresh,因此在使用 scroll-view 组件时无法利用page的该特性。

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()= {
 this.setData({
 words: newwords
 wx.hideNavigationBarLoading() //完成停止加载
 wx.stopPullDownRefresh() //停止下拉刷新
 }, 2000)

4、利用onReachBottom页面上拉触底事件

注:,首次进入页面,如果页面不满一屏时会触发 onReachBottom ,应为只有用户主动上拉才触发;手指上拉,会触发多次 onReachBottom,应为一次上拉,只触发一次;所以在编程时需要将这两点考虑在内。

onReachBottom:function(){
 console.log('hi')
 if (this.data.loading) return;
 this.setData({ loading: true });
 updateRefreshIcon.call(this);
 var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
 setTimeout( () = {
 this.setData({
 loading: false,
 words: words
 }, 2000)

5、上划加载图标动画

 * 旋转刷新图标
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
 duration: 1000
 var timer = setInterval( ()= {
 if (!this.data.loading)
 clearInterval(timer);
 animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
 deg += 360;
 this.setData({
 refreshAnimation: animation.export()
 }, 2000);

最后附上布局代码:

 view wx:for="{{words}}" 
 view 
 view 
 view {{item.message}} /view 
 view {{item.time}} /view 
 /view 
 view {{item.greeting}} /view 
 /view 
 /view 
 view wx:if="{{loading}}" 
 image animation="{{refreshAnimation}}" src="../../resources/refresh.png" /image 
 /view 

希望本文所述对大家微信小程序设计有所帮助。


分享新闻到:

更多阅读

微信小程序申请_微信小程序列表烘托功用

行业动态 2021-01-11
手机微信微信小程序目录3D渲染作用之目录往下拉更新及上拽载入的完成方式剖析 本文关...
查看全文

米拓商城微信小程序_vue完成商城购物车功

行业动态 2021-01-11
vue完成商城系统买东西车作用 本文关键为大伙儿详尽详细介绍了vue完成商城系统买东西...
查看全文

上海微网站建设-软件开发公司企业网站建

行业动态 2021-01-11
手机软件/高新科技高档网站设计制作考虑顾客和协作小伙伴的期待是雍熙的主要每日任务,同...
查看全文
返回全部新闻


区域站点: 南丰县免费抠图换背景软件   南宫市网页效果图制作   囊谦县在线抠图软件   南和县手机抠图   南华县免费抠图换背景软件   南江县网页效果图制作   南京市在线抠图软件   南靖县手机抠图   南康市免费抠图换背景软件   南乐县网页效果图制作   南陵县在线抠图软件   南宁市手机抠图   南平市免费抠图换背景软件   南皮县网页效果图制作   南市区在线抠图软件   南通市手机抠图   南投县免费抠图换背景软件   南雄市网页效果图制作   南溪县在线抠图软件   南阳市手机抠图   南漳县免费抠图换背景软件   南召县网页效果图制作   南郑县在线抠图软件   那坡县手机抠图   那曲县免费抠图换背景软件   纳雍县网页效果图制作   讷河市在线抠图软件   内黄县手机抠图   内江市免费抠图换背景软件   内丘县网页效果图制作   内乡县在线抠图软件   嫩江市手机抠图   聂荣县免费抠图换背景软件   尼玛县网页效果图制作   尼木县在线抠图软件   宁安市手机抠图   宁波市免费抠图换背景软件   宁城县网页效果图制作   宁德市在线抠图软件   宁都县手机抠图   宁国市免费抠图换背景软件   宁海县网页效果图制作   宁化县在线抠图软件   宁晋县手机抠图   宁陵县免费抠图换背景软件   宁明县网页效果图制作   宁南县在线抠图软件   宁强县手机抠图   宁陕县免费抠图换背景软件   宁武县网页效果图制作   宁乡市在线抠图软件   宁阳县手机抠图   宁远县免费抠图换背景软件   农安县网页效果图制作   磐安县在线抠图软件   盘锦市手机抠图   盘山县免费抠图换背景软件   磐石市网页效果图制作   盘州市在线抠图软件   蓬安县手机抠图   澎湖县免费抠图换背景软件   蓬莱市网页效果图制作   彭山县在线抠图软件   蓬溪县手机抠图   彭阳县免费抠图换背景软件   彭泽县网页效果图制作   彭州市在线抠图软件   偏关县手机抠图   平安县免费抠图换背景软件   平昌县网页效果图制作   平定县在线抠图软件   屏东县手机抠图   平度市免费抠图换背景软件   平果县网页效果图制作   平和县在线抠图软件   平湖市手机抠图   平江县免费抠图换背景软件   平乐县网页效果图制作   平凉市在线抠图软件   平利县手机抠图   平罗县免费抠图换背景软件   平陆县网页效果图制作   屏南县在线抠图软件   平泉市手机抠图   屏山县免费抠图换背景软件   平顺县网页效果图制作   平塘县在线抠图软件   平潭县手机抠图   平武县免费抠图换背景软件   萍乡市网页效果图制作   平乡县在线抠图软件   平阳县手机抠图   平遥县免费抠图换背景软件   平阴县网页效果图制作   平邑县在线抠图软件   平远县手机抠图   平舆县免费抠图换背景软件   皮山县网页效果图制作   普安县在线抠图软件   浦北县手机抠图   浦城县免费抠图换背景软件   普洱市网页效果图制作   普格县在线抠图软件   浦江县手机抠图   普兰县免费抠图换背景软件   普宁市网页效果图制作   莆田市在线抠图软件   迁安市手机抠图   乾安县免费抠图换背景软件   潜江市网页效果图制作   潜山市在线抠图软件  

友情链接: 淘宝做图片用什么 类似图怪兽的软件 招牌设计图片 抠图在线 手机版

Copyright © 2002-2020 在线抠图软件_手机抠图_免费抠图换背景软件_网页效果图制作_通道怎么抠图 版权所有 (网站地图) 备案号:粤ICP备10235580号