小程序项目

代码相关的主要文件有：

1. app.json
2. pages/index/index.wxml
3. pages/index/index.wxss
4. pages/index/index.js

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": "首页",
    "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="indexContainer">
  <view class="recommendSongContainer">
    <view class="header">
      <view class="title">推荐歌单</view>
      <view>
        <text class="desc">邂逅你的真爱歌单</text>
        <text class="btn">></text>
      </view>
    </view>
    <scroll-view class="recommendSongList" enable-flex scroll-x>
      <view class="recommendItem" wx:for="{{list}}" wx:key="id">
        <image src="{{item.picUrl}}"></image>
        <view class="name">{{item.title}}</view>
      </view>
    </scroll-view>
  </view>
  <view class="newSongContainer">
    <view class="header">
      <view class="title">新歌速递</view>
      <view>
        <text class="desc">更多鲜乐更多快落</text>
        <text class="btn">></text>
      </view>
    </view>
  </view>
  <view class="newDiscContainer">
    <view class="header">
      <view class="title">新碟上架</view>
      <view>
        <text class="desc">魔力新碟好听到爆</text>
        <text class="btn">></text>
      </view>
    </view>
  </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
25
26
27
28
29
30
31
32
33
34
35

pages/index/index.wxss

.indexContainer{
  padding: 0 20rpx;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}
.header .title{
  font-weight: bold;
}
.header .desc{
  font-size: 24rpx;
  color: #333;
  padding: 0 20rpx;
}
.header .btn{
  font-size: 24rpx;
  padding: 0 10rpx;
  background: #eee;
  color: #888;
  border-radius: 6rpx;
}

.recommendSongList{
  display: flex;
}
.recommendSongList image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}
.recommendSongList .name{
  font-size: 26rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

pages/index/index.js

Page({
  data:{
    list:[]
  },
  onLoad(){
    this.getDataFromServer();
  },
  getDataFromServer(){
    const result = [
      {id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: "后摇MV | 原来后摇也能视觉化"},
      {id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士乐中的“酸性”融合"},
      {id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后缀大科普"},
      {id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士让你全身心放松"},
      {id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英伦女声』遗世而独立的不列颠玫瑰"},
      {id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "声光美学 I 经典电影中的古典配乐集"},
      {id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美剧中的神级插曲"},
      {id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音乐的力量 I 文艺复兴时期的世俗情歌"},
      {id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "时尚运动•必备节奏"},
      {id: 739403485, picUrl: "https://p2.music.126.net/RPilW2ADtU91CK3qkVPizA==/18720284976441185.jpg", title: "弦外有声——活力小提琴"}
    ]
    this.setData({list:result})
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

问题描述及解决方法

• 问题描述
  scroll-view横向滚动后，其高度却很大，导致其后的元素几乎排至页面底部，如下图所示。
  
• 解决方法
  给scroll-view设置指定高度，如height: 280rpx;，即可解决以上问题。

.recommendSongList{
  display: flex;
  height: 280rpx;  /*指定scroll-view的高度*/
}
1
2
3
4

• 修改后的效果
  

相关链接

滑块视图的实现