The scroll-view-navigation bar of WeChat applet slides left and right

 

The wxml is as follows:

<scroll-view class='scrollView' scroll-x='true'>

<view class='cc'>

<view class='vvv' wx:for='{
   
   {20}}'>225</view>

</view>

</scroll-view>

wxss is as follows:

.cc {
/* 关键 white-space: nowrap; */

white-space: nowrap;

height: 200rpx;

width: 100%;

background: orange;

}

 

.cc>view {
width: 300rpx;

height: 200rpx;

box-sizing: content-box;

font-size: 24rpx;

line-height: 200rpx;

text-align: center;

/* 关键 display: inline-block; */

display: inline-block;

overflow: hidden;

background: purple;

border: 1rpx solid white;

color: white;

}

Transfer from: https://blog.csdn.net/weixin_40344560/article/details/81118769