uniapp實現微信小程序商品分類側邊欄效果

前言：微信小程序的代碼實現，uniapp與原生代碼差別不大，語法格式可對比swiper實現的原生代碼和scrollview實現的uniapp代碼。

參考資料：

微信小程序api>>https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

獲取元素/組件與頂部的距離>>https://www.jianshu.com/p/fe72cff2b808

swiper實現的簡易demo>>https://blog.csdn.net/weixin_41599291/article/details/93650074

功能實現：

右側滾動，左側會對應高亮顯示；

左側是否重複點擊，右側顯示相應數據，置頂；

實現思路：

圍繞scroll-view組件的scroll-into-view和scroll-top屬性展開

巨坑：for(let i in this.topList)中的  i  屬於字符串，執行計算操做時必須先轉數字int

效果圖：

    

代碼：

<template>
    <view>
        <view style="text-align: center;">搜索欄</view>
        <view class='productNav'>
          <view class='left'>
            <view :class="posi == 'id'+index ?'selected':'normal'" @tap='switchNav("id"+index, index)' v-for="(item, index) in dataList" :key="index">{{item.name}}</view>
          </view>
          <view class='right'>
            <scroll-view scroll-y="true" class="scroll" @scroll="scroll" :scroll-into-view="posi" :scroll-top="scrollTop">
                <view :id="item.id" v-for="(item, index) in dataList" :key="index">
                    <view class="title">{{item.name}}</view>
                    <view v-for="(subitem, i) in item.num" :key="i">{{item.name}}{{subitem}}</view>
                </view>
            </scroll-view>
          </view>
        </view>
    </view>
</template>

<script> export default { data() { return { posi: '', scrollTop: 0, data: ['爲您推薦','電腦','手機','美妝'] ,//模擬數據
                dataList: [], //循環數據
                dataEleHeight: [] ,//獲取data數組中各個元素的高度
                topList: [], //計算獲得各個元素與頂部的距離
                scrollHeight: 500, //滾動區域的高度
                flag: true //判斷左側是否作高亮顯示判斷
 } }, onLoad() { //初始化數據，至關於請求數據
            for (let i = 0; i < this.data.length; i++) { let rand = parseInt(Math.random()*100,10); let num = [] for(let j = 0; j < rand; j++) { num.push(j); } let obj = { id: 'id'+i, name: this.data[i], num: num } if(i == 0){ this.posi = obj.id } this.dataList.push(obj) } }, watch: { dataEleHeight(val) { if (val.length == this.dataList.length) { //判斷是第幾個元素，高度設置爲以前的元素高度之和
                    let top = 0
                    for (let i in this.dataEleHeight) { if (i >= 0 && i < this.dataEleHeight.length) { if(i != 0) { top += this.dataEleHeight[i-1].height } this.topList.push(top); } } } console.log(this.topList) } }, mounted(){ let that = this
            for (let i = 0; i < this.dataList.length; i++) { //獲取元素屬性最好是在渲染以後執行，避免獲取空值
                uni.createSelectorQuery().in(this).select('#'+this.dataList[i].id).boundingClientRect(function(rect){ let obj = { id: that.dataList[i].id, height: rect.height } that.dataEleHeight.push(obj); }).exec(); } }, methods: { scroll(e) { let index = this.posi.substring(2) //若是點擊了左側分類,則不作左側高亮顯示判斷
                if (this.flag) { for(let i in this.topList){ if (i < this.topList.length - 1 && this.topList[i] <= e.detail.scrollTop && e.detail.scrollTop < this.topList[parseInt(i) + 1]) { this.posi = this.dataList[i].id break; }
　　　　　　　　　　　　　　this.posi = this.dataList[i].id } } this.flag = true
                this.scrollTop = e.detail.scrollTop //解決重複點擊菜單時右側數據不變的問題
 }, switchNav: function (e, index) { this.flag = false
                if(this.posi != e){ this.posi = e } else { //重複點擊同樣要定位到最開頭的位置
                    this.scrollTop = this.topList[index]; } } } } </script>

<style> .productNav{ display: flex; flex-direction: row; font-family: "Microsoft YaHei" } .left{ width: 25%; font-size: 30rpx; background-color: #f4f4f4; } .left view{ text-align: center; height: 90rpx; line-height: 90rpx; } .selected{ background-color: #fff; border-left: 2px solid #E54847; font-weight: bold; color: #E54847; } .normal{ background-color: #f4f4f4; border-bottom: 1px solid #f2f2f2; } .right{ width:75%; margin: 0; } .scroll{ height: 500px; text-align: center; } .title{ background: #E54847; color: white; } </style>