今天說一下小程序經(jīng)常遇到的聯(lián)動(dòng)案例，項(xiàng)目要求點(diǎn)左邊右邊的內(nèi)容要對應(yīng)的跳轉(zhuǎn)，所以說當(dāng)我們點(diǎn)擊左側(cè)邊欄的時(shí)候要?jiǎng)討B(tài)的把id傳給右邊的內(nèi)容，使其對應(yīng)，接下來就看看是怎么實(shí)現(xiàn)的吧。下節(jié)我會說一下右到左的聯(lián)動(dòng)，喜歡的小伙伴要關(guān)注哦。

左右聯(lián)動(dòng).gif

實(shí)現(xiàn)該功能的思路：通過點(diǎn)擊左側(cè)滑欄的某一項(xiàng)，獲取到該元素?cái)y帶的 id ，然后動(dòng)態(tài)傳給右側(cè)滑欄的 scroll-into-view ，從而實(shí)現(xiàn)右側(cè)滑欄對應(yīng)的該元素運(yùn)動(dòng)置頂。

以下為完整數(shù)據(jù)

數(shù)據(jù)格式：

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': '汾酒' } ] } ], } module.exports = list;

wxml內(nèi)容：

<view class="container"> <!--左側(cè)欄--> <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"> <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id，那個(gè)就是當(dāng)前狀態(tài)--> <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置，使用data-id設(shè)置每個(gè)item的id值，供打開右側(cè)側(cè)滑欄使用--> <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> <!--右側(cè)欄--> <!--如果使用 scroll-into-view 屬性，必須設(shè)置 scroll-view 的高度，且最好是動(dòng)態(tài)獲取屏幕高度 --> <!-- scroll-into-view 屬性 值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素 --> <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內(nèi)容：

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

wxss代碼 (樣式可能會不全，需要引入weui.wxss文件)

/* pages/listers/listers.wxss */ /* pages/list-1/list-1.wxss *//*總體主盒子*/ .container { position: relative; width: 100%; height: 1220rpx; background-color: #f0f4f7; color: #939393; } /*左側(cè)欄主盒子*/ .nav_left{ /*設(shè)置行內(nèi)塊級元素（沒使用定位）*/ display: inline-block; width: 100%; height: 100%; /*主盒子設(shè)置背景色為灰色*/ background: #fff; text-align: center; /* position: fixed; */ left: 0; top: 0; border-top: 1rpx solid #dedede; } /*左側(cè)欄list的item*/ .nav_left .nav_left_items{ background: #fff; /*每個(gè)高30px*/ height: 80rpx; /*垂直居中*/ line-height: 80rpx; /*再設(shè)上下padding增加高度，總高42px*/ padding: 15rpx 0; /*只設(shè)下邊線*/ border-bottom: 1px solid #dedede; /*文字14px*/ font-size: 29rpx; color: #101010; font-weight: } /*左側(cè)欄list的item被選中時(shí)*/ .nav_left .nav_left_items.active{ /*背景色變成白色*/ background: #f0f4f7; color: #ed1000; } /*右側(cè)欄主盒子*/ .scroll_right{ /*右側(cè)盒子使用了絕對定位*/ 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%; } /*右側(cè)欄list的item*/ .nav_right_items{ /*浮動(dòng)向左*/ float: left; /*每個(gè)item設(shè)置寬度是33.33%*/ width: 50%; /* height: 160rpx; */ text-align: center; color: #4a4a4a; background: #fff; } .nav_right_items image{ /*被圖片設(shè)置寬高*/ width: 60px; height: 50px; margin-top: 15rpx; } .nav_right_items text{ /*給text設(shè)成塊級元素*/ display: block; margin-top: 5rpx; margin-bottom: 10rpx; font-size: 26rpx; /*設(shè)置文字溢出部分為...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /** 自定義其他點(diǎn)擊態(tài)樣式類 **/ .other-navigator-hover{ background:#fff; } .scroll_left{ width:25%; height:100%; background:#fff; text-align:center; position: fixed; left: 0;top: 0 }

轉(zhuǎn)載于:https://www.cnblogs.com/changk/p/9260371.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序左到右联动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。