小程序项目

代码涉及的文件有

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"
}
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

scroll-view组件

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

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

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