滑块视图的实现

小程序项目

代码涉及的文件有

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. static/images（小程序根目录下新建目录：static，static新建子目录：images，用于存放静态图片）

app.json

{
    
  "pages":[
    "pages/index/index"
  ],
  "window":{
    
    "navigationBarBackgroundColor": "#1c424d",
    "navigationBarTitleText": "AITO",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages/index/index.wxml

<view class="container">
  <scroll-view class="list" enable-flex scroll-x>
    <view class="item">
      <image src="/static/images/aito-m5.jpg"></image>
      <text>AITO 问界M5，行无界，智千里</text>
    </view>
    <view class="item">
      <image src="/static/images/m5.jpg"></image>
      <text>先锋首秀，上演智能的豪华</text>
    </view>
    <view class="item">
      <image src="/static/images/aito-wenjie-m5.jpg"></image>
      <text>天生好强，只为自由驰骋。高手起步，远近都在行</text>
    </view>
    <view class="item">
      <image src="/static/images/m7.jpg"></image>
      <text>问界M7，豪华智慧大型电动SUV</text>
    </view>
    <view class="item">
      <image src="/static/images/aito.jpg"></image>
      <text>AITO，以优雅姿态驾驭更多活力</text>
    </view>
  </scroll-view>
</view>

pages/index/index.wxss

.container{
    
  padding: 20rpx;
}
.list{
    
  display: flex;
}
.item{
    
  width: 200rpx;
  margin-right: 20rpx;
}
.item image{
    
  width: 200rpx;
  height: 112rpx;
  border-radius: 10rpx;
}
.item text{
    
  font-size: 26rpx;
  /* 多行文本溢出，省略号代替 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2; 
}

scroll-view组件

scroll-view可实现一个可滚动的视图区域。

scroll-view 组件有很多属性，常用的有：

• enable-flex，是否启用flex布局，只有启用，display:flex才会生效。布尔值，默认是false，即默认不启用flex布局。
• scroll-x，是否允许横向滚动。布尔值，默认是false，即默认不允许横向滚动。