我爱小程序
| 问题模块 |
|---|
| API和组件 |
<scroll-view scroll-x>
<view class='listzu' wx:for="{{listzuss}}" wx:key="listzuss" wx:for-index="idx">
<view class='bao' wx:for="{{item.baolist}}" wx:key="baolist" wx:for-index="idxs">
</view>
<view class='bao {{item.opcitybao}}' wx:for="{{item.baolist1}}" wx:key="baolist1" wx:for-index="idxss">
</view>
</view>
</scroll-view>
多层渲染时，循环过程中会出现倒序渲染的情况，这个怎么解决，或者是不是我的代码哪里有问题
网友回复
@んS 我出现bug是在数据只有7条或者8条的时候
@んS //wxss部分，scroll-view横向滚动时各种bug
.scroll-view_H {height: 764rpx;white-space: nowrap;}
.baoqun {float: left;}
.listzu {display: inline-block;}//此处为什么只能用display: inline-block;才能使scroll-view左右滑动
.baolist {float: left;margin-left: 70rpx;margin-top: 50rpx;}
.baolist1 {float: left;margin-left: 70rpx;}
.baolist1:nth-child(2) {float: left;}
.listzu:last-child {margin-right: 60rpx;}
.listzu:first-child {margin-left: -10rpx;}
.bao {width: 138rpx;height: 154rpx;}
.opcitybao {opacity: 0.64;}
.bao {margin-top: 72rpx;}
.bao image:nth-child(1) {width: 138rpx;height: 154rpx;}
.bao .baocon {width: 138rpx;height: 154rpx;position: absolute;margin-top: -154rpx;}
.bao .baocon text:nth-child(1) {width: 110rpx;text-align: center;display: block;margin: auto;font-size: 22rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.bao .baocon image:nth-child(2) {width: 44rpx;height: 20rpx;display: block;margin: auto;margin-top: 4rpx;}
.bao .baocon image:nth-child(3) {width: 71rpx;height: 71rpx;display: block;margin: auto;border-radius: 50%;margin-top: 9rpx;}
.bao .baocon1 {width: 138rpx;height: 178rpx;position: absolute;margin-top: -178rpx;display: none;}
.bao .baocon1 image:nth-child(1) {width: 138rpx;height: 88rpx;display: block;margin: auto;font-size: 22rpx;margin-top: -4rpx;}
.bao .baocon1 text:nth-child(2) {width: 110rpx;text-align: center;display: block;margin: auto;font-size: 22rpx;margin-top: -84rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.bao .baocon1 text:nth-child(3) {width: 100%;text-align: center;display: block;font-size: 22rpx;color: #ec3030;}
.bao .baocon1 image:nth-child(4) {width: 44rpx;height: 20rpx;display: block;margin: auto;margin-top: 4rpx;}
.bao .baocon1 image:nth-child(5) {width: 71rpx;height: 71rpx;display: block;margin: auto;border-radius: 50%;margin-top: 2rpx;}
<scroll-view class="scroll-view_H" scroll-x bindscroll="binddaoyoubian" style='width:{{scrolwidth}}' scroll-left="{{scrollleft}}">
<view class='baoqun'>
<view class='listzu' wx:for="{{listzuss}}" wx:key="listzuss" wx:for-index="idx">
<view class='baolist'>
<view class='bao {{item.opcitybao}}' wx:for="{{item.baolist}}" wx:key="baolist" wx:for-index="idxs">
<view bindtap='{{item.qianghongbaola}}' data-rpid='{{item.RPID}}' data-rptype='{{item.RPType}}' data-rplog='{{item.RPLogo}}' data-id="{{idx}}" data-ids="{{idxs}}">
<image src='../image/q_hongbao@3x.png'></image>
<view class='baocon' style='display:{{item.diszhengchang}}'>
<text>{{item.RPTitle}}</text>
<image src='../image/q_qunyou@3x.png'></image>
<image src='{{item.RPLogo}}'></image>
</view>
<view class='baocon1' style='display:{{item.disyiqiang}}'>
<image src='../image/z_dakaihongbao@3x.png'></image>
<text>{{item.RPTitle}}</text>
<text>￥{{item.RPAmount}}</text>
<image src='../image/q_qunyou@3x.png'></image>
<image src='{{item.RPLogo}}'></image>
</view>
</view>
</view>
</view>
<view class='baolist1'>
<view class='bao {{item.opcitybao}}' wx:for="{{item.baolist1}}" wx:key="baolist1" wx:for-index="idxss">
<view bindtap='{{item.qianghongbaola}}' data-rpid='{{item.RPID}}' data-rptype='{{item.RPType}}' data-rplog='{{item.RPLogo}}' data-id="{{idx}}" data-idss="{{idxss}}">
<image src='../image/q_hongbao@3x.png'></image>
<view class='baocon' style='display:{{item.diszhengchang}}'>
<text>{{item.RPTitle}}</text>
<image src='../image/q_qunyou@3x.png'></image>
<image src='{{item.RPLogo}}'></image>
</view>
<view class='baocon1' style='display:{{item.disyiqiang}}'>
<image src='../image/z_dakaihongbao@3x.png'></image>
<text>{{item.RPTitle}}</text>
<text>￥{{item.RPAmount}}</text>
<image src='../image/q_qunyou@3x.png'></image>
<image src='{{item.RPLogo}}'></image>
</view>
</view>
</view>
</view>
<view style='clear:both'></view>
</view>
</view>
</scroll-view>
是否有代码示例呢？