News:这是一个新的Typecho主题,如果使用问题请反馈给我QQ1989473781

微信小程序实现左右列表联动

忧郁之子 1718 0 条

这篇文章主要为大家详细介绍了微信小程序实现左右列表联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现左右列表联动的具体代码,供大家参考,具体内容如下
效果图:
201902150841061.png
201902150841062.png
直接上代码:
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核心代码:

轩宇网工作室 此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“轩宇网工作室”或者“xynetstudio”或者扫描右侧二维码关注本站微信公众号。

wxss界面:

.header{
 display: flex;
 background-color: rgba(219, 219, 221, 0.884);
 align-items: center;
 height: 60rpx;
}
.active{
 color: red;
}
.header .headerClass{
 color: red;
 margin-left: 20rpx;
}
.header .headerClass,
.header .headerPin{
 font-size: 28rpx;
}
.search{
 display: flex;
 height: 46rpx;
 border-radius: 20rpx;
 margin-left: 30rpx;
 background-color:white;
 width: 70%;
}
.search text{
 color: gainsboro;
 font-family: monospace;
 font-size: 30rpx;
 line-height: 46rpx;
  
}
.search image{
 padding-left:50rpx; 
 width: 46rpx;
 height: 46rpx;
}
.main{
 display: flex;
}
.left{
 width: 25%
}
.left view{
 padding-top: 30rpx;
 text-align: center;
}
.right{
 width: 75%; 
}
  
.listItem2{
 display: flex;
}
.listItem .img{
 width: 200rpx;
 height: 200rpx;
 text-align: center;
 padding-top: 10rpx;
}
.listItem .img image{
 width: 80%;
 height: 80%
}
.itemTitle{
 font-size: 32rpx;
 padding-left: 20rpx;
 padding-top: 10rpx;
 color:gray;
}
.listItem .listText{
 display: flex;
 flex-direction: column;
 margin-top: 6rpx;
}
.listItem .listText view{
 display: flex;
 align-items: flex-end;
}
.listItem .listText text{
 font-size: 34rpx;
 margin-top: 10rpx;
}
.listItem .listText .money{
 color: red;
}
.listItem .listText view text{
 font-size: 28rpx;
 color :silver;
 margin-right: 60rpx;
}
.listItem .listText view button{
 background-color: red;
 color: white;
 padding-right: 8px;
 padding-left: 8px;
 padding-top: 0px;
}
::-webkit-scrollbar
{
width: 6px;
height: 6px;
background-color: #ffffff;
} 
::-webkit-scrollbar-track{
 height: 20rpx;
 color: black;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持轩宇网。

发表我的评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
欢迎光临轩宇网工作室