本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下
效果图:
wxml
<view class="pro-container">
<scroll-view class="left-menu" scroll-y scroll-with-animation="true" scroll-top="{{leftMenuTop}}">
<view class="menu-item {{index===currentActiveIndex?'menu-active':''}}" wx:for="{{item}}" wx:key="{{item.index}}" id="{{index}}" catchtap='changeMenu' >{{item.typename}}</view>
</scroll-view>
<scroll-view v-if="item!=''" class="right-pro" bindscroll = "scroll" scroll-y scroll-with-animation="true" scroll-top="{{rightProTop}}">
<view class="pro-item" wx:for="{{item}}">
<view class="item-header">{{item.typename}}</view>
<view class="pro-item-container">
<view wx:for="{{item.shop_goods}}" wx:key="{{index}}" class="pro-item-item">
<image lazy-load="true" src="{{item}}"></image>
<text>{{item.goodname}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
wxss
.left-menu{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 180rpx;
background-color: #f8f8f8;
font-size: 32rpx;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
.left-menu .menu-item{
width: calc(100% - 16rpx);
height: 80rpx;
padding:0 8rpx;
line-height: 80rpx;
text-align: center;
}
.left-menu .menu-item.menu-active{
border-left:8rpx solid red;
padding-left: 0;
background-color: #fff;
}
/* 右边商品区域 */
.right-pro{
position: absolute;
left: 180rpx;
top:0;
bottom: 0;
width:calc(100% - 180rpx);
background-color: #fff;
display: flex;
overflow: hidden;
}
.right-pro .pro-item{
padding:20rpx;
}
.right-pro .item-header{
display: inline-block;
font-size: 30rpx;
line-height: 40rpx;
color: #fff;
background-color: red;
padding:0rpx 30rpx;
margin: 10rpx auto;
}
.right-pro .pro-item-container{
font-size: 28rpx;
}
.pro-item-item{
width: calc((100% - 180rpx) / 2 );
display:inline-block;
}
.right-pro .pro-item-container image{
width: 100rpx;
height: 100rpx;
display: block;
margin: 0 auto;
}
.right-pro .pro-item-container text{
display: block;
text-align: center;
}
wxjs
let proListToTop = [], menuToTop = [], MENU = 0, windowHeight,timeoutId;
// MENU ==> 是否为点击左侧进行滚动的,如果是,则不需要再次设置左侧的激活状态
Page({
data: {
proList: [],
item: [],
item2:[
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
{
"typename": "服饰",
},
],
currentActiveIndex: 0
},
onLoad: function (options) {
// ---------------------------ajax----------------------
var utilMd5 = require('../../utils/md5.js');
var md5 = utilMd5.hexMD5;
var timestamp = new Date().getTime();
var that = this;
var jsonStr = JSON.stringify({ "shopid": "34" });
var token = md5(jsonStr + timestamp) + timestamp;
wx.request({
url: "https://api.jvjiewang.com/Home/Shop/goods",
data: {
jsonStr: jsonStr,
token: token
},
method: 'POST',
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function (res) {
console.log(res.data.respond);
var items = res.data.respond;
that.setData({
item: items
})
}
})
//----------------------------ajax----------------------
// 确保页面数据已经刷新完毕~
setTimeout(() => {
this.getAllRects()
}, 200)
},
changeMenu(e) {
// 改变左侧tab栏操作
if (Number(e.target.id) === this.data.currentActiveIndex) return
MENU = 1
this.setData({
currentActiveIndex: Number(e.target.id),
rightProTop: proListToTop[Number(e.target.id)]
})
this.setMenuAnimation(Number(e.target.id))
},
scroll(e) {
for (let i = 0; i < proListToTop.length; i++) {
if (e.detail.scrollTop < proListToTop[i] && i !== 0 && e.detail.scrollTop > proListToTop[i - 1]) {
return this.setDis(i)
}
}
// 找不到匹配项,默认显示第一个数据
if (!MENU) {
this.setData({
currentActiveIndex: 0
})
}
MENU = 0
},
setDis(i) {
// 设置左侧menu栏的选中状态
if (i !== this.data.currentActiveIndex + 1 && !MENU) {
this.setData({
currentActiveIndex: i - 1
})
}
MENU = 0
this.setMenuAnimation(i)
},
setMenuAnimation(i){
// 设置动画,使menu滚动到指定位置。
let self = this
if (menuToTop[i]) {
console.log(11111)
// 节流操作
if(timeoutId){
clearTimeout(timeoutId)
}
timeoutId = setTimeout(()=>{
console.log(12138)
self.setData({
leftMenuTop: (menuToTop[i].top - windowHeight)
})
},50)
} else {
if (this.data.leftMenuTop === 0) return
this.setData({
leftMenuTop: 0
})
}
},
getActiveReacts(){
wx.createSelectorQuery().selectAll('.menu-active').boundingClientRect(function (rects) {
return rects[0].top
}).exec()
},
getAllRects() {
// 获取商品数组的位置信息
wx.createSelectorQuery().selectAll('.pro-item').boundingClientRect(function (rects) {
rects.forEach(function (rect) {
proListToTop.push(rect.top)
})
}).exec()
// 获取menu数组的位置信息
wx.createSelectorQuery().selectAll('.menu-item').boundingClientRect(function (rects) {
wx.getSystemInfo({
success: function (res) {
windowHeight = res.windowHeight / 2
rects.forEach(function (rect) {
menuToTop.push({
top: rect.top,
// animate:rect.top > windowHeight
})
})
}
})
}).exec()
},
// 获取系统的高度信息
getSystemInfo() {
let self = this
wx.getSystemInfo({
success: function (res) {
windowHeight = res.windowHeight / 2
}
})
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。