小程序二级分类（一级、多级分类）弹性上拉，下拉跳转分类，兼容安卓、IOS，h5网页同理

最新推荐文章于 2024-12-12 17:09:10 发布

心有余爱

最新推荐文章于 2024-12-12 17:09:10 发布

阅读量4.2k

点赞数 3

分类专栏： 20211130 文章标签：微信小程序前端

本文链接：https://blog.csdn.net/weixin_41312919/article/details/124292761

版权

20211130 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了微信小程序中如何实现弹性上拉下滑刷新效果，以及分类导航的逻辑实现。通过示例代码展示了如何控制二级分类的显示隐藏，以及利用swiper组件和scroll-view实现右侧刷新的弹性效果。文章还提供了关键代码片段帮助理解整个实现过程。

摘要由CSDN通过智能技术生成

先上效果：

弹性上拉下滑刷新-效果展示

分类导航部分大致原理：

二级分类显示隐藏由两个参数控制分别是：当前一级分类=记录的一级分类、是否显示参数（show）。

一级分类绑定setid1事件，点击时并记录一级分类id，当再次点击为一级分类id时，与前记录对比就设置是否显示（show）为相反；与记录id不同时，设记录为新id，并且设是否显示（show）为true，如果有子分类（二级），则记录二级分类id为第一个子分类id。

二级分类绑定setid2事件，点击时记录二级分类id。

下面贴出部分代码方便理解：

wmxl

<scroll-view scroll-y="true" class="l">
  <view wx:for="{{list}}" wx:key="key">
    <view data-id="{{item.ugoodstypeid}}" bindtap="setid" class="{{selectid==item.ugoodstypeid ? 'selected' : ''}}">{{item.ugoodstypename}}</view>
    <view wx:if="{{selectid==item.ugoodstypeid && show ? true : false}}">
      <view wx:for="{{item.children}}" wx:key="key" bindtap="setid2" data-id2="{{item.ugoodstypeid}}" class="{{selectid2==item.ugoodstypeid ? 'selected2' : ''}}" >
        >{{item.ugoodstypename}}
      </view>
    </view>
  </view>
</scroll-view>

//一级分类事件
setid(event) {
    if (event.currentTarget.dataset.id != this.data.selectid) {
      this.setData({
        selectid: event.currentTarget.dataset.id,
        show:true
      })
      for (let i = 0; i < this.data.list.length; i++) {
        if (this.data.selectid == this.data.list[i].ugoodstypeid) {
          if (this.data.list[i].children.length > 0) {
            this.setData({
              selectid2: this.data.list[i].children[0].ugoodstypeid
            })
          }
        }
      }
//更新数据
      this.getgoodsList()
    } else {
      this.setData({
        show: !this.data.show
      })
    }
  },
//二级分类事件
setid2(event) {
    this.setData({
      selectid2: event.currentTarget.dataset.id2
    })
//更新数据
    this.getgoodsList()
  },

右边刷新大致原理：

利用swiper的弹性效果，仅设置一个swiper-item，并且设置垂直方向和不循环滚动。然后swiper-item内嵌入scroll-view（可滚动容器）。当scroll-view未到底部或顶部时滑动，是scroll-view内的滑动，当到达了底部或者顶部时继续向底部或者顶部滑动，此时是整个swiper-item的弹性滑动（因为只有一个item，并且是不循环，所以是弹性的），此时监听swiper-item距离显示器顶部距离，设置超过多少（灵敏度）触发跳转

下面贴出部分代码方便理解：

wmxl

<swiper class="swiper_container" vertical="true" circular="false" current="0" bindchange='onSlideChangeEnd'>
      <block>
        <swiper-item id="navigation">
          <scroll-view scroll-y="true" style="height:100vh">
            <view class="swiper_item it1" wx:for="{{listgoods1}}" >
            <view class="goodsname">{{item.goodsname}}</view>
            <view class="goodsname">{{item.goodstype}}</view>
            </view>
          </scroll-view>
        </swiper-item>
      </block>
    </swiper>

 mytouchend(event) {
    // 灵敏度 
    let num=100;
    var that = this;
    wx.createSelectorQuery().select('#navigation').boundingClientRect(function (rect) {
      that.setData({
        gaodu: rect.top
      })
      if (that.data.gaodu-54 > num) {
        //上拉触发

      } else if ((that.data.gaodu-54) < -num) {
       //下拉触发
        
      }
    }).exec()
  }

有问题欢迎交流~