• 附录5-本地生活案例(上拉触底，下拉刷新)

    目录

    1  效果

    1.1  首页

    1.2  商品列表页

    1.3  消息页

    1.4  联系我们

    2  代码

    2.1  标题与标题后的背景

    2.2  tabBar

    2.3  首页

    2.3.1  wxml

    2.3.2  wxss

    2.3.3  js

    2.3.4  轮播图接口数据

    2.3.5  九宫格接口数据

    2.4  商品列表页

    2.4.1  wxml

    2.4.2  wxss

    2.4.3  js

    2.4.4  商品信息接口数据

    2.4.5  下拉刷新

    2.4.6  上拉触底

    2.4.7  正在加载提示

    2.4.8  节流

    2.4.9  分页

    2.4.10  修改标题

    2.5  消息页

    2.6  联系我们

    2.6.1  颜色接口

    2.6.2  将颜色接口渲染到页面上

    2.6.3  请求节流

    2.6.4  请求提示

    2.6.5  wxml 

    2.6.6  wxss

    2.6.7  js

    1  效果

    本地生活一共有三个主页面（首页，消息，联系我们），一个辅页面（商品列表）

    1.1  首页

    点击九宫格部分就进入到商品列表

    不是所有的九宫格都有信息的，这个是后端接口的问题，我们点击美食是有信息的

    1.2  商品列表页

    里面有商品的信息，有下拉刷新

    有上拉触底

    1.3  消息页

    这个是空的，什么都没有

    1.4  联系我们

    联系我们里面是一堆随机的颜色

    有上拉触底

    切换tabBar的时候会记录当前位置

    • 默认情况下就会记录当前位置，不用写什么代码

    2  代码

    2.1  标题与标题后的背景

    2.2  tabBar

    2.3  首页

    首页就是简单的请求输入，然后渲染到主页的结构上

    2.3.1  wxml

    1. <swiper class="top_swiper" indicator-dots="true" autoplay="true" circular="true">
    2.   <swiper-item wx:for="{{ swiper_array }}" wx:key="id">
    3.     <image src="{{item.image}}" alt="" class="top_swiper_item_image" />
    4.   </swiper-item>
    5. </swiper>
    6.  
    7. <view class="nine_view">
    8.   <view wx:for="{{ categories_array }}" wx:key="id" >
    9.   <image src="{{ item.icon }}" mode="" bindtap="toShoplist" data-shoplist_id="{{item.id}}" data-shoplist_name="{{item.name}}"/>
    10.   <text>{{ item.name }}</text>
    11. </view>
    12. </view>
    13.  
    14. <view class="two_view">
    15.   <image src="/src/images/two_view/link-01.png" mode=""/>
    16.   <image src="/src/images/two_view/link-02.png" mode=""/>
    17. </view>

    2.3.2  wxss

    1. /**index.wxss**/
    2. .top_swiper {
    3.   height:350rpx;
    4. }
    5.  
    6. .top_swiper_item_image {
    7.   width:100%;
    8.   height:100%;
    9. }
    10.  
    11. .nine_view {
    12.   display: flex;
    13.   flex-wrap:wrap;
    14.   margin-top:30rpx;
    15. }
    16.  
    17. .nine_view view {
    18.   width:33%;
    19.   height:160rpx;
    20.   text-align: center;
    21. }
    22.  
    23. .nine_view view:nth-child(-n+8) {
    24.   border-right:1px solid rgb(250,250,250);
    25.   border-bottom:1px solid rgb(250,250,250);
    26. }
    27.  
    28. .nine_view view image {
    29.   width:70rpx;
    30.   height:70rpx;
    31. }
    32.  
    33. .nine_view view text{
    34.   display: block;
    35.   font-size:30rpx;
    36. }
    37.  
    38. .two_view {
    39.   display: flex;
    40.   justify-content: space-around;
    41.   height:200rpx;
    42.   padding-left:20rpx;
    43.   padding-right:20rpx;
    44. }
    45.  
    46. .two_view image{
    47.   width:45%;
    48.   height:100%;
    49. }

    2.3.3  js

    1. // index.js
    2. Page({
    3.   data: {
    4.     swiper_array:[],
    5.     categories_array:[]
    6.   },
    7.   // 获取轮播图数据
    8.   get_swiper_array() {
    9.     wx.request({
    10.       // url: 'https://www.escook.cn/slides',
    11.       url: 'https://applet-base-api-t.itheima.net/slides',
    12.       method:'GET',
    13.       success:(val) => {
    14.         this.setData({swiper_array:val.data})
    15.       }
    16.     })
    17.   },
    18.   // 获取九宫格数据
    19.   get_categories_array() {
    20.     wx.request({
    21.       // url: 'https://www.escook.cn/categories',
    22.       url: 'https://applet-base-api-t.itheima.net/categories',
    23.       method:'GET',
    24.       success:(val) => {
    25.         this.setData({categories_array:val.data})
    26.       }
    27.     })
    28.   },
    29.   toShoplist(e) {
    30.     wx.navigateTo({url:'/pages/shoplist/shoplist?shoplist_id='+e.target.dataset.shoplist_id+'&shoplist_name='+e.target.dataset.shoplist_name})
    31.   },
    32.   // 事件处理函数
    33.   onLoad() {
    34.     this.get_swiper_array()
    35.     this.get_categories_array()
    36.   },
    37.   onReady() {
    38.     
    39.   },
    40. })

    2.3.4  轮播图接口数据

    2.3.5  九宫格接口数据

    2.4  商品列表页

    2.4.1  wxml

    2. <view wx:for="{{ shoplist }}" wx:key="id" class="shoplist_container">
    3.   <image src="{{ item.images[0] }}" mode="scaleToFill"/>
    4.   <view>
    5.     <text style="font-weight: 700;font-size: 36rpx;">{{item.name}}text>
    6.     <text>电话：{{item.phone}}text>
    7.     <text>地址：{{item.address}}text>
    8.     <text>营业时间：{{item.businessHours}}text>
    9.   view>
    10. view>

    2.4.2  wxss

    1. /* pages/shoplist/shoplist.wxss */
    2. page {
    3.  background-color: rgb(240,240,240);
    4. }
    5.  
    6. .shoplist_container {
    7.   display: flex;
    8.   padding:20rpx;
    9.   box-shadow: 5px 5px 3px -10px rgba(0,0,0,0.3);
    10.   /* border:1px solid red; */
    11.   margin-top:20rpx;
    12.   margin-left:10rpx;
    13.   margin-right:10rpx;
    14.   background-color: white;
    15. }
    16.  
    17. .shoplist_container image {
    18.   width:250rpx;
    19.   height:250rpx;
    20.   vertical-align: middle;
    21. }
    22.  
    23. .shoplist_container view {
    24.   vertical-align: middle;
    25.   width:70%;
    26.   margin-left:20rpx;
    27. }
    28.  
    29. .shoplist_container view text {
    30.   display: block;
    31.   margin-bottom:20rpx;
    32.  font-size:28rpx; 
    33. }

    2.4.3  js

    1. // pages/shoplist/shoplist.js
    2. Page({
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.     query:{},
    8.     shoplist:[],
    9.     page:1,
    10.     pageSize:10,
    11.     istop:true,
    12.     shoplist_isloading:false
    13.   },
    14.   getShoplist() {
    15.     if (this.data.shoplist_isloading == false) {
    16.       this.setData({'shoplist_isloading':true})
    17.       wx.showLoading({
    18.         title:'正在加载',
    19.         mask:true
    20.       })
    21.       wx.request({
    22.         url:'https://applet-base-api-t.itheima.net/categories/' + this.data.query.shoplist_id + '/shops',
    23.         method:'GET',
    24.         data:{
    25.           _page:this.data.page,
    26.           _limit:this.data.pageSize
    27.         },
    28.         success:(val) => {
    29.           if (this.data.istop) {
    30.             console.log(1)
    31.             this.setData({'shoplist':[...val.data,...this.data.shoplist]})
    32.           }
    33.           else {
    34.             this.setData({'shoplist':[...this.data.shoplist,...val.data]})
    35.           }
    36.           
    37.         },
    38.         complete:() => {
    39.           wx.hideLoading()
    40.           this.setData({'shoplist_isloading':false})
    41.         }
    42.       })
    43.     }
    44.   },
    45.   /**
    46.    * 生命周期函数--监听页面加载
    47.    */
    48.   onLoad(options) {
    49.     this.setData({'query':options})
    50.     
    51.     this.getShoplist()
    52.   },
    53.  
    54.   /**
    55.    * 生命周期函数--监听页面初次渲染完成
    56.    */
    57.   onReady() {
    58.     wx.setNavigationBarTitle({
    59.       title: this.data.query.shoplist_name,
    60.     })
    61.   },
    62.  
    63.   /**
    64.    * 生命周期函数--监听页面显示
    65.    */
    66.   onShow() {
    67.  
    68.   },
    69.  
    70.   /**
    71.    * 生命周期函数--监听页面隐藏
    72.    */
    73.   onHide() {
    74.  
    75.   },
    76.  
    77.   /**
    78.    * 生命周期函数--监听页面卸载
    79.    */
    80.   onUnload() {
    81.  
    82.   },
    83.  
    84.   /**
    85.    * 页面相关事件处理函数--监听用户下拉动作
    86.    */
    87.   onPullDownRefresh() {
    88.     this.setData({'page':this.data.page + 1})
    89.     this.setData({'istop':true})
    90.     this.getShoplist()
    91.     wx.stopPullDownRefresh()
    92.   },
    93.  
    94.   /**
    95.    * 页面上拉触底事件的处理函数
    96.    */
    97.   onReachBottom() {
    98.     if (this.data.page < 10) {
    99.       this.setData({'page':this.data.page + 1})
    100.       this.setData({'istop':false})
    101.       this.getShoplist()
    102.     }
    103.   },
    104.  
    105.   /**
    106.    * 用户点击右上角分享
    107.    */
    108.   onShareAppMessage() {
    109.  
    110.   }
    111. })

    2.4.4  商品信息接口数据

    通过这里的1切换不同种类的商品，比如1就是吃的，2就是玩的

    _page与_limit是做分页的

    2.4.5  下拉刷新

    首先在页面.json中开启下拉刷新

    在页面.js中有专门监听下拉刷新的钩子函数，执行完下拉刷新后用 wx.stopPullDownRefresh()拉回去

    • 我这里用istop这个属性判断 在上面增加数据(下拉刷新)还是在下面增加数据(上拉触底)

    2.4.6  上拉触底

    上拉触底如果不改变默认的触底距离不需要进行额外的配置，详细情况可以看一下 10.全局配置 app.json 与页面配置

    在该项目中没有因为上拉触底对json文件进行修改，只在页面.js中补充了上拉触底的钩子

    上拉触底与下拉刷新应该加上是否没有新的请求数据这种情况，判定res.data是不是长度为0就行了，我没写，小项目让用户多请求几次也没什么问题,上拉触底我没写，他也不会发起新的请求

    请求的节流阀如果你不愿意写也不用写，感觉连续触发是比较少的情况

    2.4.7  正在加载提示

    2.4.8  节流

    2.4.9  分页

    每一页的限制基本是不变的，在下拉刷新与上拉触底时页数+1就行了（打开页面就会按初始值立即执行一遍getShoplist()，所以在下拉刷新和上拉触底中getShoplist()前就需要page+1）

    2.4.10  修改标题

    进入列表页的时候，标题不再为本地生活，而是商品名称

    2.5  消息页

    消息页什么都没放

    2.6  联系我们

    2.6.1  颜色接口

    颜色是请求出来的，不是自己随机出来，每次请求就会出现一些rgb值

    2.6.2  将颜色接口渲染到页面上

    用{{}}配合行内样式

    2.6.3  请求节流

    2.6.4  请求提示

    2.6.5  wxml 

    2.  
    3. <view wx:for="{{color_list}}" wx:key="index" style="background-color: rgb({{item}});">{{item}}view>

    2.6.6  wxss

    1. /* pages/contact_us/contact_us.wxss */
    2. view {
    3.   height:250rpx;
    4.   line-height:250rpx;
    5.   text-align: center;
    6.   margin-top:50rpx;
    7. }

    2.6.7  js

    1. // pages/contact_us/contact_us.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     color_list:[],
    9.     can_get_color_list:true
    10.   },
    11.   get_color_list() {
    12.     if (this.data.can_get_color_list) {
    13.       wx.showLoading({title:'正在加载'})
    14.       this.setData({can_get_color_list:false})
    15.       wx.request({
    16.         url:'https://applet-base-api-t.itheima.net/api/color',
    17.         method:'GET',
    18.         success:(val) => {
    19.           this.setData({color_list:[...this.data.color_list,...val.data.data]}) 
    20.         },
    21.         complete:() => {
    22.           wx.hideLoading()
    23.           this.setData({can_get_color_list:true})
    24.         }
    25.       })
    26.     }
    27.   },
    28.  
    29.   /**
    30.    * 生命周期函数--监听页面加载
    31.    */
    32.   onLoad(options) {
    33.     this.get_color_list()
    34.   },
    35.  
    36.   /**
    37.    * 生命周期函数--监听页面初次渲染完成
    38.    */
    39.   onReady() {
    40.  
    41.   },
    42.  
    43.   /**
    44.    * 生命周期函数--监听页面显示
    45.    */
    46.   onShow() {
    47.  
    48.   },
    49.  
    50.   /**
    51.    * 生命周期函数--监听页面隐藏
    52.    */
    53.   onHide() {
    54.  
    55.   },
    56.  
    57.   /**
    58.    * 生命周期函数--监听页面卸载
    59.    */
    60.   onUnload() {
    61.  
    62.   },
    63.  
    64.   /**
    65.    * 页面相关事件处理函数--监听用户下拉动作
    66.    */
    67.   onPullDownRefresh() {
    68.  
    69.   },
    70.  
    71.   /**
    72.    * 页面上拉触底事件的处理函数
    73.    */
    74.   onReachBottom() {
    75.     this.get_color_list()
    76.   },
    77.  
    78.   /**
    79.    * 用户点击右上角分享
    80.    */
    81.   onShareAppMessage() {
    82.  
    83.   }
    84. })
  • 相关阅读:
    antd-design的modal结合form表单传值
    MetaGPT和LangGraph对比
    关于图神经网络（GNN），有哪些创新点
    pytorch Nvidia 数据预处理加速
    Python - flask后端开发笔记
    【笔试训练】day11
    接口复习总结
    为什么有HTTP协议，还要有websocket协议？
    H5页面调用admob激励视频，用户获取奖励
    Java计算机毕业设计电影评分网站源码+系统+数据库+lw文档
  • 原文地址：https://blog.csdn.net/potato123232/article/details/133196890