首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >云函数生成聚合之后createSelectorQuery().selectAll失效?

云函数生成聚合之后createSelectorQuery().selectAll失效?

提问于 2021-04-16 23:34:17
回答 0关注 0查看 158

生成这个聚合之后,能获取聚合内每层数组内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;

}

只能实现左联动

回答

和开发者交流更多问题细节吧,去 写回答
相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档