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>