生成这个聚合之后,能获取聚合内每层数组内index,但是
wx.createSelectorQuery().selectAll失效所以导致左右联动的右联动失效,本来想通过这个生成一个数组启动左右联动,还一直报错
js const db=wx.cloud.database(); const $ = db.command.aggregate; var that = ''; var query; var arr = []; Page({ data: { list:[], idx: 0, scrollTop: 0, toView:'positon0' }, onLoad: function (options) { that = this; query = wx.createSelectorQuery(); wx.createSelectorQuery().selectAll('.position').boundingClientRect(function (rects) { that.setData({ positions:rects }) }).exec(); wx.cloud.callFunction({ // 要调用的云函数名称 name: 'All', // 传递给云函数的event参数 data: { } }).then(res => { console.log(res.result.list); this.setData({ list: res.result.list }) // output: res.result === 3 }).catch(err => {console.log(err) // handle error }) }, switchClassfun(e){ var e = e.currentTarget.dataset.index; this.setData({ idx: e, toView: 'position' + e }) }, bindscrollfunc(e){ var arr = []; console.log(e) for(var item of this.data.positions){ if (item.top <= e.detail.scrollTop + 2){ arr.push(item) } } this.setData({ idx:arr[arr.length-1].dataset.index }) }, })
wxml
<view class='big-box'>
<view class='left-menu'>
<block wx:for="{{list}}" wx:key="key">
<view class='{{index == idx ? "avtive":"Default-Class"}}' catchtap="switchClassfun" data-index="{{index}}">{{index}}{{item.menu}}</view>
</block>
</view>
<view style='width:73%;'>
<scroll-view
class='scrollclass'
scroll-y="true"
scroll-with-animation="true"
enable-back-to-top="true"
scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}"
bindscroll="bindscrollfunc">
<block wx:for="{{list}}" wx:for-item="item" wx:key="key">
<view class='scroll-box position' id="position{{index}}" data-index="{{index}}">
<view class='title'>{{item.menu}}</view>
<block wx:for="{{item.product}}" wx:for-item="items" wx:key="key" data-index="{{index}}" >
<view class='scroll-box-product-box'>
<image src='{{items.img}}' class='product-img'></image>
<view class='product-info-box'>
<view class='product-name'>{{index}}{{items.name}}</view>
<view class='product-English-name'>{{items.beizhu}}</view>
<view class='product-price'>¥{{items.price}}</view>
</view>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
</view>
wxss
page{
height: 100%;
width: 100%;
overflow: hidden;
}
.big-box{
border-top: 2rpx solid #F7F7F7;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.big-box .left-menu{
width: 27%;
background: #F7F7F7;
height: 100%;
}
.Default-Class{
padding: 26rpx 0;
font-size: 28rpx;
text-align: center;
border-bottom: 1rpx solid #E2E2E2;
border-left: 8rpx solid #F7F7F7;
}
.scrollclass{
width: 100%;
height: 100%;
overflow: hidden;
}
.scroll-box .title{
padding: 26rpx 20rpx;
font-size: 28rpx;
text-align: left;
}
.scroll-box-product-box{
display: flex;
justify-content: space-between;
width: 94%;
margin: auto;
padding: 20rpx 0;
border-bottom: 1rpx solid #E2E2E2;
}
.scroll-box-product-box .product-img{
width: 140rpx;
height: 140rpx;
border-radius: 10rpx;
}
.scroll-box-product-box .product-info-box{
width: 70%;
position: relative;
}
.scroll-box-product-box .product-info-box .product-name{
font-weight: 600;
color: #333;
font-size: 30rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scroll-box-product-box .product-info-box .product-English-name{
color: #666;
font-size: 24rpx;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scroll-box-product-box .product-price{
font-weight: 600;
color: #333;
font-size: 30rpx;
position: absolute;
bottom: 0rpx;
}
.avtive{
padding: 26rpx 0;
background: #fff;
border-left: 8rpx solid #89A0D2;
color: #333;
text-align: center;
font-weight: 600;
font-size: 28rpx;
}
只能实现左联动