0
点赞
收藏
分享

微信扫一扫

小程序 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>

举报

相关推荐

0 条评论