美文网首页
微信小程序实现右侧商品分类滑动时,左侧分类导航栏的相应分类被选中

微信小程序实现右侧商品分类滑动时,左侧分类导航栏的相应分类被选中

作者: smallzip | 来源:发表于2020-03-24 11:19 被阅读0次

    实现右边内容滑动,左边侧栏联动被选中

    效果

    小程序滑动效果.gif

    实现方式

    1. wsml
    <view class="container">
      <view class='content'>
        <view class="box">
          <view class="left">
            <scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" scroll-top="{{scrollTopLeft}}">
              <view wx:for="{{list}}" data-index="{{index}}" bindtap="toScrollView">
                <view class="left-item {{selectedSub==index?'left-active':''}}">侧栏{{index+1}}</view>
              </view>
            </scroll-view>
          </view>
          <view class="right">
            <scroll-view scroll-y="true" style="height:{{scrollHeight}}px;" scroll-into-view="{{toView}}" scroll-top="0" bindscroll="scrollTo" scroll-with-animation>
              <view wx:for="{{list}}" id="position{{index}}">
                <view class="right-item">
                  <view class="right-classify-title">分类名称{{index+1}}</view>
                  <view wx:for="{{item.list}}">
                    <view class="flex" style="height:80px;width:100%;">
                      <image src="/assets/images/recharge.jpg" style="width:100rpx;height:100rpx;"></image>
                      <view>内容{{index+1}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    
    // pages/purchase/index.js
    let scrollDdirection = 0; // 用来计算滚动的方向
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        selectedSub: 0, // 选中的分类
        scrollHeight: 0, // 滚动视图的高度
        list: Array.from(Array(8), (item, index) => {
          return {
            title: "分类",
            list: Array.from(Array(10))
          }
        }),
        toView: 'position0' // 滚动视图跳转的位置
        scrollTopLeft: 0, //  左边滚动位置随着右边分类而滚动
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        // 获取设备信息
        wx.getSystemInfo({
          success: res => {
            this.setData({
              scrollHeight: res.windowHeight
            })
          }
        })
        // 获取数据
         this.getData();
      },
      // 获取数据
      getData(){
         setTimeout(() => {
          // 异步请求数据,请求完毕并且渲染数据之后才可以执行lisenerScroll
          this.setData({
            // list:requestData // 得到请求的数据,并且渲染视图
          },() => {
            // 获取所有分类的头部偏移量
            this.lisenerScroll();
          })
        },300)
      },
      /**
       * 跳转滚动条位置
       */
      toScrollView(e) {
        const {
          selectedSub
        } = this.data
        const {
          index
        } = e.currentTarget.dataset
        let left_ = 0
        if (index > 3) {
          left_ = (index - 3) * 50 // 左边侧栏item高度为50,可以根据自己的item高度设置
        }
        this.setData({
          selectedSub: index,
          toView: `position${index}`,
          scrollTopLeft: left_
        })
      },
      /**
       * 获取右边每个分类的头部偏移量
       */
      lisenerScroll() {
        // 获取各分类容器距离顶部的距离
        new Promise(resolve => {
          let query = wx.createSelectorQuery();
          for (let i in this.data.list) {
            query.select(`#position${i}`).boundingClientRect();
          }
          query.exec(function(res) {
            resolve(res);
          });
        }).then(res => {
          this.data.list.forEach((item, index) => {
            item.offsetTop = res[index].top
          })
          this.setData({
            scrollInfo: res,
            list: this.data.list
          })
        });
      },
      /**
       * 监听滚动条滚动事件
       */
      scrollTo(e) {
        const scrollTop = e.detail.scrollTop; //滚动的Y轴
        const {
          selectedSub,
          list
        } = this.data;
        let left_ = 0
        if (scrollDdirection < scrollTop) {
          // 向上滑动
          scrollDdirection = scrollTop
          // 计算偏移位置
          if (selectedSub < list.length - 1 && scrollTop >= list[selectedSub + 1].offsetTop) {
           if (selectedSub > 2) {
              left_ = (selectedSub - 2) * 50
            } 
            this.setData({
              selectedSub: selectedSub + 1,
              scrollTopLeft: left_
            })
          }
        } else {
          // 向下滑动
          scrollDdirection = scrollTop
          // 计算偏移位置
          if (selectedSub > 0 && scrollTop < list[selectedSub].offsetTop && scrollTop > 0) {
           if (selectedSub > 3) {
              left_ = (selectedSub - 4) * 50
            }
           this.setData({
              selectedSub: selectedSub - 1,
              scrollTopLeft: left_
            })
          }
        }
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
       
      },
    })
    
    1. wxss
    /* pages/purchase/index.wxss */
    
    .box {
      display: flex;
    }
    
    .left {
      width: 25vw;
    }
    
    .left-item {
      padding: 30rpx 20rpx;
      background-color: #eee;
    }
    
    .left-active {
      background-color: #fff;
      border-left: 6rpx solid red;
    }
    
    .right {
      width: 75vw;
      background: #fff;
      padding: 0 20rpx;
    }
    
    .right-classify-title {
      font-size: 0.9rem;
      color: #777;
      height: 50px;
      line-height: 60px;
    }
    

    相关文章

      网友评论

          本文标题:微信小程序实现右侧商品分类滑动时,左侧分类导航栏的相应分类被选中

          本文链接:https://www.haomeiwen.com/subject/mzxoyhtx.html