小程序 scroll-view

效果图.gif 展示区域（待补充）

demo1

<view class="scroll_box tl-margin-t20">
 <scroll-view class="scroll-view_x" scroll-x style="white-space: nowrap;">
            <view class='u-img-skimgs' wx:for="{{skItems}}">
                <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>
    </scroll-view>
</view> 

demo2

<view class="scroll_box">
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
        <view class="item_list" wx:for="{{skItems}}">
            <image src="home_4.png" style="width: 160rpx;height: 120rpx" mode="aspectFill"></image>
            <view class="item_book_text">测试数据</view>
        </view>
    </scroll-view>
</view>

css

.scroll_box{
    width: 100vw;
    height: 247rpx;
    overflow: hidden;
    white-space: nowrap;
    background: #fff;
}
.item_list{
    width: 160rpx;
    height: auto;
    margin-right: 23rpx;
    display: inline-block;
}
.item_book_img{
    width: 160rpx;
    height: auto;
    margin-right: 23rpx;
}

js

"skItems": [{
            "pic": "F.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "d.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "9.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": ".png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "d.png",
            "pOld": "999",
            "pNew": "666"
        }, {
            "pic": "9.png",
            "pOld": "999",
            "pNew": "666"
        }]

<view class="scroll_box tl-margin-t20">

<scroll-view class="scroll-view_x" scroll-x style="white-space: nowrap;">
        <view class='u-img-skimgs' wx:for="{{skItems}}">
            <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>
</scroll-view>

</view>
<view class="scroll_box tl-margin-t20">
<scroll-view class="scroll-view_x" scroll-x style="white-space: nowrap;">
<view class='u-img-skimgs' wx:for="{{skItems}}">
<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>
</scroll-view>
</view>
<view class="scroll_box tl-margin-t20">
<scroll-view class="scroll-view_x" scroll-x style="white-space: nowrap;">
<view class='u-img-skimgs' wx:for="{{skItems}}">
<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>
</scroll-view>
</view>

转载于:https://www.jianshu.com/p/82f107de540d