公告列表
公告列表
收藏
回答

小程序 movable-area movable-view会出现横向滚动条

小程序  movable-area  movable-view 在苹果系列手机上会出现横向滚动条。会超屏幕，即使把page设置了

page{
    background: #F7F7F7;
    overflow-x: hidden!important;
}


也没有效果。


具体参看录制的视频：https://www.bilibili.com/video/av54251261/（视频传不上来。。。）





<view class='u-wrp-secKill tl-margin-t20'>
    <movable-area style='width:auto;pointer-events: none;'>
        <movable-view animation scroll-x style='height:220rpx;min-width:2668rpx;margin-left: 30rpx;pointer-events: auto;' direction='horizontal' inertia='true' out-of-bounds>
            <block wx:for='{{skItems}}'>
                <view class='u-img-skimgs'>
                    <view class="tl-w175">
                        <view class="font-60-b tl-color-blue line-h-45"><text class="tl-color-blue font-23-b">￥</text> 50</view>
                        <view class="tl-left"><text class="tl-colo-l-blue font-18-5">(仅橱窗可用)</text></view>
                    </view>
                    <view class="tl-w175-r">
                        <view class="font-26-b tl-color-333">优惠劵名字</view>
                        <view class="font-16-5 tl-color-333 tl-t-b">有效期:19/05/11-19/05/15</view>
                        <view class="tl-btn-120 font-20-b tl-color-fff">立即领取</view>
                    </view>
                </view>
            </block>
        </movable-view>
    </movable-area>
</view>


初始数据：

"skItems": [{
            "pic": "https://file.snailpet.cn/wxApplet/home_%E5%8A%B5%E8%83%8C%E6%99%AF.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "https://file.snailpet.cn/72/6c/726c4798188b1edb0f8acc95c942043d.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "https://file.snailpet.cn/7c/9a/7c9a25946b5dc29e85ff23e94e5d94f9.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "https://file.snailpet.cn/c7/04/c7047572652c846c0d3d59fca25c91be.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "https://file.snailpet.cn/72/6c/726c4798188b1edb0f8acc95c942043d.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "https://file.snailpet.cn/7c/9a/7c9a25946b5dc29e85ff23e94e5d94f9.png",
            "pOld": "999",
            "pNew": "666"
        }]


css

/*优惠券横向滑动样式 start*/
.u-wrp-secKill {
    display: block;
    position: relative;
    width: 100vw;
    height: 247rpx;
    background: #fff;
}
 
.u-wrp-secKillHead {
    display: block;
    position: relative;
    width: inherit;
    height: 60rpx;
    border-bottom: 1px solid #f0f0f0;
}
 
.u-txt-skTitle {
    line-height: 60rpx;
    font-size: 28rpx;
    color: #f00;
    padding: 0 20rpx;
    display: inline-block;
    position: relative;
    font-weight: bold;
}
 
.u-txt-sktime {
    line-height: 60rpx;
    font-size: 24rpx;
    color: #333;
    padding: 0 20rpx;
    display: inline-block;
    position: relative;
    font-weight: bold;
}
 
.u-img-skimgs {
    position: relative;
    width: 412rpx;
    height: 220rpx;
    display: inline-block;
    background: url("https://file.snailpet.cn/wxApplet/home_%E5%8A%B5%E8%83%8C%E6%99%AF.png") no-repeat 0 41rpx;
    background-size: 100% auto;
    float: left;
    text-align: center;
    margin-left: 30rpx;
    padding-top:41rpx;
}
 
.u-img-skimgItem {
    width:412rpx;height:166rpx;
}
 
.u-txt-sktxtItem1 {
    display:block;color:#f00;font-size:24rpx;
}
 
.u-txt-sktxtItem2 {
    display:block;color:#999;font-size:24rpx;text-decoration:line-through;
}
/*优惠券横向滑动样式 end*/


最后一次编辑于  2019-06-04
回答关注问题邀请回答
收藏

2 个回答

请 登录 后发表内容
相关问题
相关文档