scroll-view 小程序横向滚动

page .bottom {
padding-top: 100rpx;
}
page .bottom .jr_bottom scroll-view {
white-space: nowrap;
}
page .bottom .jr_bottom .view_nr:first-child{
margin-left: 50rpx;
}
page .bottom .jr_bottom .view_nr {
display: inline-block;
width: 236rpx;
height: 316rpx;
border: 1px solid red;
margin-right: 50rpx;
}

page .bottom .jr_bottom .view_nr image {
width: 236rpx;
height: 316rpx;
}

page .bottom .jr_bottom .view_nr text {
display: block;
width: 239rpx;
height: 50rpx;
background: rgba(27, 188, 157, 1);
border-radius: 8rpx;
color: #fff;
text-align: center;
}
 
 
moban:[
{ src:'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg',text:'科创模式'},
{ src: 'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg', text: '时尚模式' },
{ src: 'http://pic.qiantucdn.com/58pic/19/73/92/571081073ab7f_1024.jpg', text: '运动模式' }
]
 
<view class='bottom'>
<view class='jr_bottom'>
<block wx:for="{{[1]}}">
<scroll-view scroll-x="true">
<view wx:for="{{moban}}" class='view_nr'>
<image src="{{item.src}}" mode="aspectFill"></image>
<text>{{item.text}}</text>
</view>
</scroll-view>
</block>
</view>
</view>

猜你喜欢

转载自www.cnblogs.com/ylblogs/p/9577301.html