Implementation of slider view

Applet project

The files involved in the code are

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. static/images（ Create a new directory under the applet root directory ：static,static Create a new subdirectory ：images, Used to store still pictures ）

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  Ask boundary M5, Line unbounded , Chi Qianli </text>
    </view>
    <view class="item">
      <image src="/static/images/m5.jpg"></image>
      <text> Pioneer first show , Perform smart luxury </text>
    </view>
    <view class="item">
      <image src="/static/images/aito-wenjie-m5.jpg"></image>
      <text> Born strong , Just for freedom . Master start , Travel far and near </text>
    </view>
    <view class="item">
      <image src="/static/images/m7.jpg"></image>
      <text> Ask boundary M7, Luxury smart large electric SUV</text>
    </view>
    <view class="item">
      <image src="/static/images/aito.jpg"></image>
      <text>AITO, Drive more energy with grace </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;
  /*  Multi line text overflow , Ellipsis instead  */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2; 
}

scroll-view Components

scroll-view It can realize a scrollable view area .

scroll-view Components have many properties , Commonly used ：

• enable-flex, Is it enabled? flex Layout , Only enable ,display:flex Will take effect . Boolean value , The default is false, That is, it is not enabled by default flex Layout .
• scroll-x, Whether horizontal scrolling is allowed . Boolean value , The default is false, That is, horizontal scrolling is not allowed by default .