开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

微信小程序打造本地宝(3)——消息列表

简介: 微信小程序打造本地宝(3)——消息列表
+关注继续查看

列表模块


上拉界面重新加载


image

image

onPullDownRefresh():监听用户下拉动作


首先,下拉加载要调用系统的API onPullDownRefresh() 来实现,在onPullDownRefresh()中,首先要把列表中的原始数据清空,将shopList,pageIndex等统统初始化,在进行重新获取数据操作。最后一定要 wx.stopPullDownRefresh(); 否则在手机端一直存在。


/**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function () {
     console.log("下拉事件");
     // 下拉刷新页面
     // 3.1 把数据先设置回默认值
     this.setData({
         shopList:[],
         pageIndex:0,
         hasMore:true,
     });  
     // 3.2 再重新请求数据
     this.loadMore();
     // 3.3 记得停止,否则在手机端一直存在
     wx.stopPullDownRefresh();
 },


用来加载数据的自定义函数


loadMore: function () {

    // 2.2如果没有更多数据,就直接返回
    if (!this.data.hasMore) return;

    wx.request({
        url: "https://locally.uieee.com/categories/" + this.data.catId + "/shops",
        data: {
            _limit: this.data.pageSize,
            _page: ++this.data.pageIndex
        },
        success: (res) => {
            console.log(res);
            // bug:请求过来的数据把本来的替换掉了
            // 1.6. 解决bug思路,先获取本来的数据,再通过concat把新数据拼接起来。
            var newList = this.data.shopList.concat(res.data);
            // 2.3 获取数据的总数
            var count = parseInt(res.header['X-Total-Count']);
            // 2.4 用于判断比较是否还有更多数据
            var flag = this.data.pageIndex * this.data.pageSize < count;
            this.setData({
                shopList: newList,
                hasMore: flag,
            });
        },
    });
},


然后还需在json中设置可以下拉属性


{
    "enablePullDownRefresh": true
}


上拉加载更多


onReachBottom: function () {
    console.log("上拉触底");
    // 1.5. 触底再调用加载数据的函数
    this.loadMore();
},


源代码


wxml


<view class="shop" wx:for="{{ shopList }}" wx:key="id">
    <image class="shop-img" src="{{ item.images }}"></image>
    <view class="shop-info">
        <text class="shop-title ell">{{ item.name }}</text>
        <text class="shop-tel">电话:{{ item.phone }}</text>
        <text class="shop-address">地址:{{ item.address }}</text>
        <text class="shop-time">营业时间:{{ item.businessHours }}</text>
    </view>
    <view class="shop-star">
        <view class='star-after'>★★★★★</view>
        <view class='star-before' style="width:{{ item.score }}%;">★★★★★</view>
    </view>
</view>

<view class="loadmore loading" wx:if="{{ hasMore }}">正在加载...</view>
<view class="loadmore" wx:else>你已经到达我的底线了</view>


wxss


page{
    background-color: #fff;
}
.shop{
    padding: 20rpx;
    border-bottom: 1rpx solid #ddd;
    display: flex;
    position: relative;
}
.shop-img{
    width:160rpx;
    height:160rpx;
    margin-right: 20rpx;
}
.shop-info{
    width:520rpx;
    display:flex;
    flex-direction: column;
    font-size:12px;
    color:#666;
    line-height: 1.5;
}
.shop-title{
    font-size: 16px;
    color:#333;
    width: 380rpx;
}
.shop-star{
    position: absolute;
    right:20rpx;
    top:20rpx;
}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
3.1【微信小程序全栈开发课程】在本地搭建后端开发环境
第二章将前端页面的框架基本搭建好了,第三章,我们来做登录功能,登录功能需要在后端获取到用户信息,返回到前端。所以先来搭建后端开发环境
27 0
你可能不知道微信小程序客服消息还能这么用~
最近都在使用uni-app+uniCloud来完成一些个人原创技术内容的基础建设,比如完成了一个名为大帅老猿的小程序。未来还将利用这个小程序来和读者们互动,以及承载一些产品的创意玩法。 目前的版本就是用来承载我原创的技术内容视频或者文章,本篇文章我来分享下如何利用uniCloud云开发实现小程序客服消息的接收和发送。
113 0
浅谈微信小程序开发工具
浅谈微信小程序开发工具
59 0
微信程序开发系列教程(三)使用微信API给微信用户发文本消息
微信程序开发系列教程(三)使用微信API给微信用户发文本消息
39 0
实现拖拽列表-微信小程序
之前在网上搜索拖拽列表的实现时,发现了有好多的方法都是基于像素位置的计算实现的,这种方法要求列表元素的大小以及列表的位置有着非常严格的要求,修改和拓展起来非常的麻烦。
2118 0
快速开发微信小程序
image.png 最近婷主在做微信小程序.自己的微信公众号也需要添加点料,乘着这次放假,把微信小程序研究了下.虽然没有做什么很强大的功能,不过好歹自己的公众号也有了微信小程序.够用即可。
1233 0
微信小程序开发之模板消息
一、添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的  组件,属性report-submit为true时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId,用于发送模板消息。
1493 0
微信小程序把玩(三十二)Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.
1626 0
微信小程序开发
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bitree1/article/details/54945190  微信小程序开发步骤: 1.注册:https://mp.weixin.qq.com/  在微信公众平台注册一个账号。
745 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载