收藏
回答

scroll-view 中渲染时候出现倒着渲染的情况

<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>

多层渲染时,循环过程中会出现倒序渲染的情况,这个怎么解决,或者是不是我的代码哪里有问题


回答关注问题邀请回答
收藏

4 个回答

  • 孙少林
    孙少林
    2017-10-24

    @んS    我出现bug是在数据只有7条或者8条的时候


    2017-10-24
    有用
    回复
  • 孙少林
    孙少林
    2017-10-24

    @ん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;}


    2017-10-24
    有用
    回复
  • 孙少林
    孙少林
    2017-10-24

    <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>


    2017-10-24
    有用
    回复
  • HS
    HS
    2017-10-24

    是否有代码示例呢?

    2017-10-24
    有用
    回复
登录 后发表内容