微信小程序实现左右列表联动微信小程序实现左右列表联动
主要为大家详细介绍了微信小程序实现左右列表联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下
效果图:
直接上代码:
wxml界面:
<view class='header'>
<text class='headerClass'>分类</text>
<text class='headerPin'>/品牌</text>
<view class="search">
<image src='/images/搜索.png'></image>
<text>搜索商品</text>
</view>
</view>
<view class='main'>
<view class='left'>
<scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true">
<block wx:for="{{leftText}}" wx:for-list="item">
<view class="{{classfiySelect == item.id?'active':''}}" data-id='{{item.id}}' bindtap='left_list'>
<text>{{item.text1}}</text>
</view>
</block>
</scroll-view>
</view>
<view class='right'>
<scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true">
<block wx:for="{{rightData}}" wx:for-list="item">
<view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view>
<view bindtap='particulars' class='listItem' data-id='{{item.id}}'>
<block wx:for="{{item.frist}}">
<view class='listItem2' data-text="{{}}">
<view class='img'>
<image src='{{item.url}}'></image>
</view>
<view class='listText'>
<text>{{item.text}}</text>
<text class='money'>¥{{item.money}}</text>
<view>
<text>已售{{item.sum}}</text>
<button size='mini' bindtap='particulars'>立即抢购</button>
</view>
</view>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
</view>
js界面:
// pages/class/class.js
Page({
/**
* 页面的初始数据
*/
data: {
classfiySelect: "",
leftText: [{
id: "01",
text1: "美妆专区",
评论0