以下所述参考网上众多大佬略写,本人只是菜鸟一枚,记录博客主要怕自己记不住,方便以后参考,有何不足,欢迎补充…
方式方法和网上大多大佬有雷同,因为我也是参考网上各位大佬的…
html:
//左侧导航
<scroll-view class='scroll font_26 mb90' scroll-y="true" >
// 动态获取的左侧导航
<view class="c9 tc scrollList {{target === item.categoryId?'current':''}}" wx:for='{{navigation}}' wx:key='{{index}}'
bindtap='switchCategory' data-id="view-{{index}}" data-current="{{item.categoryId}}" >
{{item.name}}
</view>
</scroll-view>
//右侧内容
右侧内容一定要个一个固定高度,否则联动将会失效
<scroll-view class='shopRight mt1 df w80' scroll-into-view="{{toPart}}"
scroll-y="true" scroll-with-animation="true" scroll-top="{{scrollTop}}"
style='height:{{scrollHeight}}px'>
// scrollHeight 动态获取的高度
<view id="view-{{i}}" class='flex_start w100 bg shopRightList flex-column'
wx:for='{{goodsList}}' wx:key='{{index}}' wx:for-index="i" >
<view class="font_14 mt30 c3">{{item.categoryName}}</view>
<view class="flex-row goodsItem bbe" wx:for="{{item.goodsItem}}" wx:for-item="goodsItem" wx:key='{{index}}' wx:for-index="j">
<!-- 商品信息 -->
<view class='w40'>
<view class='font_28 ovh1'>{{goodsItem.name}}</view>
<view class='mt25 font_24 c9'>规格:{{goodsItem.specification}}/袋</view>
<view class='mt25 font_28'>¥{{goodsItem.price}}</view>
</view>
</view>
</scroll-view>
js:
// 动态获取屏幕高度,将高度给右侧商品
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
let scrollHeight = wx.getSystemInfoSync().windowHeight-85;
this.setData({
scrollHeight: scrollHeight
})
},
// 点击左侧当行调到相应的商品
switchCategory(e) {
let id = e.currentTarget.dataset.current, view = e.currentTarget.dataset.id;
this.setData({
target: id,
toPart: view,
});
},
// 获取商品列表
getGoodsList() {
network._get({
url: ,
success: (res) => {
if (res.data.code === '000000' && res.data.bizData) {
this.setData({
navigation: res.data.bizData.categoryResVos,
target: res.data.bizData.categoryResVos[0].categoryId
})
var data = [], list=[], that = this, categoryName = '';
this.data.navigation.map(i => {
var arr = [];
res.data.bizData.shopProductResDtos.map(j => {
if (i.categoryId === j.categoryId) {
categoryName = j.categoryName;
arr.push(j)
}
})
data = [{ categoryName: categoryName, goodsItem: arr }];
list = list.concat(data)
})
this.setData({
goodsList: list
})
}
}
})
},