微信小程序商城分類滾動列表錨點怎么實現(xiàn)

本篇內(nèi)容介紹了“微信小程序商城分類滾動列表錨點怎么實現(xiàn)”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

一、需求背景

最近接了個商城小程序的項目，在做商品分類頁面的時候，一開始是普通分類列表，但是客戶覺得效果不理想，想要滾動列表的效果，需要實現(xiàn)以下功能：

• 列表滑動效果；

• 滑動切換分類；

• 點擊分類跳轉(zhuǎn)到相應的分類位置。

思路是用使用官方組件scroll-view，給每個分類(子元素)添加錨點，然后記錄每個分類項的高度，監(jiān)聽scroll-view組件滾動事件，計算分類的跳轉(zhuǎn)

二、效果演示

三、核心代碼實現(xiàn)

下面要使用到的方法都來自于查閱微信小程序官方文檔

創(chuàng)建一個scoll-view 并配置需要用到的屬性scroll-into-view根據(jù)文檔描述此屬性是子元素的id，值為哪個就跳到那個子元素。為了使跳轉(zhuǎn)不顯得生硬，再添加scroll-with-animation屬性，然后創(chuàng)建動態(tài)生成分類的dom元素并為每個子元素添加相應的id

        <view class="content">
          <!-- 左側(cè)分類 -->
            <scroll-view scroll-y scroll-with-animation class="left"  scroll-into-view='{{leftId}}'>
              <view id='left{{index}}' class="left-item {{activeKey===index?'active':''}}" wx:for="{{navData}}" data-index='{{index}}' wx:key='id' bindtap="onChange">
                <text class='name'>{{item.name}}</text>
              </view>
            </scroll-view>
            <!-- 滾動列表 -->
            <scroll-view class="right" scroll-y scroll-with-animation scroll-into-view="{{selectedId}}" bindscroll="changeScroll" style='height:{{height}}rpx;'>
            <!-- 每個分類 -->
              <view class="item" wx:for="{{goodslist}}" wx:key="id" id='type{{index}}'>
              <!-- 分類標題 -->
                <view class="type">【{{item.name}}】</view>
                <!-- 分類下的商品 -->
                <view class="item-list">
                  <navigator  class="list-item" wx:for="{{item.list}}" wx:for-item='key' wx:key="id" url='/pages/goods/goods?id={{key.id}}'>
                    <image  src="{{key.imgurl}}" />
                    <view class="item-name">{{key.goods_name}}</view>
                  </navigator>
                </view>
                <view wx:if="{{item.list.length===0}}" class="nodata">
                  暫無商品
                </view>
              </view>
            </scroll-view>
          </view>

css部分

這里用到了吸頂效果position: sticky;

        .content {
            width: 100%;
            height: calc(100% - 108rpx);
            overflow-y: hidden;
            display: flex;

            .left {
              height: 100%;
              overflow-y: scroll;
              .left-item {
                width: 100%;
                padding: 20rpx;
                box-sizing: border-box;

                .name {
                  word-wrap: break-word;
                  font-size: 28rpx;
                  color: #323233;
                }
              }

              .active {
                border-left: 6rpx #ee0a24 solid;
                background-color: #fff;
              }
            }

            .right {
              flex: 1;

              .item {
                position: relative;
                padding: 20rpx;

                .type {
                  margin-bottom: 10rpx;
                  padding: 5rpx;
                  position: sticky;
                  top: 0;
                  background-color: #fff;
                }

                .item-list {
                  width: 100%;
                  display: grid;
                  grid-template-columns: 1fr 1fr 1fr;
                  grid-gap: 20rpx;
                  text-align: center;

                  .item-name {
                    color: #3a3a3a;
                    font-size: 26rpx;
                    margin-top: 10rpx;
                  }
                }

                .nodata{
                  padding: 20rpx;
                  color: #ccc;
                }
              }
            }
          }

2. 在列表渲染完成之后計算出每個分類的高度并且保存成一個數(shù)組

// 用到的data
data:{
    // 分類列表
    navData:[],
    // 商品列表
    goodslist:[],
    // 左側(cè)分類選中項 分類列表數(shù)組的下標
    activeKey:0,
    // 計算出的錨點的位置
    heightList:[],
    // 右側(cè)子元素的錨點
    selectedId: 'type0',
    // 左側(cè)分類的錨點
    leftId:'left0',
    // scroll-view 的高度
    height:0
},
onShow() {
    let Height = 0;
    wx.getSystemInfo({
      success: (res) => {
        Height = res.windowHeight
      }
    })
    const query = wx.createSelectorQuery();
    query.selectAll('.search').boundingClientRect()
    query.exec((res) => {
    // 計算滾動列表的高度  視口高度減去頂部高度 *2是因為拿到的是px 雖然也可以 但是我們通常使用的是rpx
      this.setData({
        height: (Height - res[0][0].height) * 2
      })
    })
},

//計算右側(cè)每個錨點的高距離頂部的高
selectHeight() {
    let h = 0;
    const query = wx.createSelectorQuery();
    query.exec((res) => {
        console.log('res', res)
        let arr=res[0].map((item,index)=>{
            h+ = item.height
            return h
        })
        this.setData({
            heightList: arr,
        })
        console.log('height', this.data.heightList)
    })
},

使用到的相關API

3.監(jiān)聽scroll-view的滾動事件，通過滾動位置計算當前是哪個分類。

changeScroll(e) {
    // 獲取距離頂部的距離
    let scrollTop = e.detail.scrollTop;
    // 當前分類選中項,分類列表下標
    let {activeKey,heightList} = this.data;
    // 防止超出分類              判斷滾動距離是否超過當前分類距離頂部高度
    if (activeKey + 1 < heightList.length && scrollTop >= heightList[activeKey]) {
        this.setData({
            // 左側(cè)分類選中項改變
            activeKey: activeKey + 1,
            // 左側(cè)錨點對應位置
            leftId: `left${activeKey + 1}`
        })
    }
    if (activeKey - 1 >= 0 && scrollTop < heightList\[activeKey - 1]) {
        this.setData({
            activeKey: activeKey - 1,
            leftId: `left${activeKey - 1}`
        })
    }
},

4. 監(jiān)聽分類列表點擊事件,點擊分類跳轉(zhuǎn)相應的分類商品列表

onChange(event) {
    let index = event.currentTarget.dataset.index
    this.setData({
      activeKey: index,
      selectId: "item" + index
    });
},

“微信小程序商城分類滾動列表錨點怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！