點擊左側導航欄切換右側商品（左右聯動）

菜單欄主要以 A,B,C,D等字母為主，即A,B,C,D等字母為對應該項攜帶的 id（id不能為漢字或純數字）。

實現該功能的思路：通過點擊左側滑欄的某一項，獲取到該元素攜帶的 id ，然后動態傳給右側滑欄的 scroll-into-view ，從而實現右側滑欄對應的該元素運動置頂。

以下為完整數據

數據格式：

list.js

var list = {"List": [{'A': [{ name: '白酒' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'B': [{ name: '白酒1' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'C': [{ name: '白酒2' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'D': [{ name: '白酒3' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'E': [{ name: '白酒4' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'F': [{ name: '白酒5' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'G': [{ name: '白酒6' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'H': [{ name: '白酒7' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'I': [{ name: '白酒8' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'J': [{ name: '白酒9' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'K': [{ name: '白酒10' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'L': [{ name: '白酒11' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }],'M': [{ name: '白酒12' },{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }]}], }

wxml

<view class="container"> <!--左側欄--><scroll-view class='scroll_left' scroll-y="true"><view class="nav_left"> <block wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this"> <!--當前項的id等于item項的id，那個就是當前狀態--> <!--用data-index記錄這個數據在數組的下標位置，使用data-id設置每個item的id值，供打開右側側滑欄使用--> <view class="nav_left_items {{curNav == idx ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" id="{{idx}}">{{itemName[0].name}}</view> </block> </view></scroll-view><!--右側欄--><!--如果使用 scroll-into-view 屬性，必須設置 scroll-view 的高度，且最好是動態獲取屏幕高度 --><!-- scroll-into-view 屬性 值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素 --><scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true"><view class="nav_right"> <view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this" bindscroll="scrollTop"><view class='minl' id='{{idx}}'>{{itemName[0].name}}</view><block wx:for="{{itemName}}" wx:for-index="idex" wx:key="*this" > <view class="nav_right_items" wx:if="{{idex>0}}"> <navigator url="../detail/detail" hover-class="other-navigator-hover"><view> <image src="{{item.picture}}"></image><view > <text>{{item.desc}}</text> </view> </view> </navigator> </view> </block> </view><view style="width:100%;height:30rpx;background:#f0f4f7"></view> </view></scroll-view> </view>

js

// pages/list-1/list-1.js var list = require('../../utils/list.js') Page({data: {// 左側點擊類樣式curNav: 'A',},onReady: function () {// 生命周期函數--監聽頁面初次渲染完成var listChild1 = list.List[0];var that = this;// 獲取可視區高度wx.getSystemInfo({success: function (res) {that.setData({list: listChild1,winHeight: res.windowHeight,})}})},//點擊左側 tab ，右側列表相應位置聯動 置頂switchRightTab: function (e) {var id = e.target.id;console.log(typeof id)this.setData({// 動態把獲取到的 id 傳給 scrollTopIdscrollTopId: id,// 左側點擊類樣式curNav:id})} })

wxss

/*總體主盒子*/ .container { position: relative; width: 100%; height: 1220rpx; background-color: #f0f4f7; color: #939393; } /*左側欄主盒子*/ .nav_left{ /*設置行內塊級元素（沒使用定位）*/ display: inline-block; width: 100%; height: 100%; /*主盒子設置背景色為灰色*/ background: #fff; text-align: center; /* position: fixed; */left: 0;top: 0;border-top: 1rpx solid #dedede; } /*左側欄list的item*/ .nav_left .nav_left_items{ background: #fff;/*每個高30px*/ height: 80rpx; /*垂直居中*/ line-height: 80rpx; /*再設上下padding增加高度，總高42px*/ padding: 15rpx 0; /*只設下邊線*/ border-bottom: 1px solid #dedede; /*文字14px*/ font-size: 29rpx;color: #101010; font-weight: } /*左側欄list的item被選中時*/ .nav_left .nav_left_items.active{ /*背景色變成白色*/ background: #f0f4f7;color: #ed1000; } /*右側欄主盒子*/ .scroll_right{ /*右側盒子使用了絕對定位*/ position: fixed;top: 0; right: 0; overflow: auto; flex: 1; /*寬度75%，高度占滿，并使用百分比布局*/ width: 75%; height: 100%; padding: 20rpx; box-sizing: border-box; background-color: #f0f4f7;border-top: 1rpx solid #dedede; } .mink::after{display:block;content:'';clear:both; } .jiul,.jiul image{width: 100%;height: 170rpx; } .minl{font-size: 29rpx;color: #777;text-align: left;line-height: 60rpx;float: left;background: #f0f4f7; width: 100%;/* height: 50rpx; */ } .mink{width: 100%;background: #fff;height: 100%; } /*右側欄list的item*/ .nav_right_items{ /*浮動向左*/ float: left; /*每個item設置寬度是33.33%*/ width: 50%; /* height: 160rpx; */text-align: center; color: #4a4a4a; background: #fff; } .nav_right_items image{ /*被圖片設置寬高*/ width: 60px; height: 50px; margin-top: 15rpx; } .nav_right_items text{ /*給text設成塊級元素*/ display: block; margin-top: 5rpx; margin-bottom: 10rpx;font-size: 26rpx; /*設置文字溢出部分為...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /** 自定義其他點擊態樣式類 **/ .other-navigator-hover{background:#fff; }.scroll_left{width:25%;height:100%;background:#fff;text-align:center; position: fixed;left: 0;top: 0 }

總結

以上是生活随笔為你收集整理的点击左侧导航栏切换右侧商品（左右联动）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。