小程序项目
代码涉及的主要文件有：
- app.json
- pages/index/index.wxml
- pages/index/index.wxss
- pages/index/index.js
app.json
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#971a22",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
pages/index/index.wxml
<view class="container">
<swiper class="bannerContainer" autoplay indicator-dots indicator-color="#971a22" indicator-active-color="ivory">
<swiper-item wx:for="{{bannerList}}" wx:key="id">
<image src="{{item.pic}}"></image>
</swiper-item>
</swiper>
<scroll-view class="recommendList" enable-flex scroll-x>
<view class="recommendItem" wx:for="{{recommendList}}" wx:key="id">
<image src="{{item.picUrl}}"></image>
<view class="title">{{item.title}}</view>
</view>
</scroll-view>
</view>
pages/index/index.wxss
.bannerContainer image{
width: 100%;
height: 300rpx;
}
.recommendList{
display: flex;
padding: 20rpx;
}
.recommendList image{
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
margin-right: 10rpx;
}
.recommendList .title{
font-size: 26rpx;
display: -webkit-box;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
pages/index/index.js
Page({
data:{
bannerList:[],
recommendList:[]
},
onLoad(){
this.getBannerList();
this.getRecommendList();
},
getBannerList(){
const result = [
{pic: "http://p1.music.126.net/N-7H0QxkjcnqNfQo7Prx9g==/109951167582698387.jpg", id: 146917329},
{pic: "http://p1.music.126.net/CRkjYtGzVn927GVZFNcykQ==/109951167582707134.jpg", id: 146972047},
{pic: "http://p1.music.126.net/UCpvQwegTjx-_ecHDDrViQ==/109951167583920308.jpg", id: 1958588078},
{pic: "http://p1.music.126.net/5hxwliN1A-ocfo1y8Rl-LA==/109951167583325800.jpg", id: 146939174},
{pic: "http://p1.music.126.net/i9A9PG9tvDqkuRekCR8EgQ==/109951167583029047.jpg", id: 1957532468},
{pic: "http://p1.music.126.net/es8XZbDQWrNjA_VyW7XJeQ==/109951167583025966.jpg", id: 146848766},
{pic: "http://p1.music.126.net/7YCWTLNpIqzdaYD_WrB6qA==/109951167583039220.jpg", id: 146627102},
{pic: "http://p1.music.126.net/u2Y1A90S5fh3R4qVhKrIGQ==/109951167582728056.jpg", id: 223052482},
{pic: "http://p1.music.126.net/Jn1zsklqb_qmPfoJsooJ2Q==/109951167582726188.jpg", id: 1957961053},
{pic: "http://p1.music.126.net/lsKgZUDW-4C8SRbQciZvmA==/109951167583045066.jpg", id: 1955958008}
]
this.setData({bannerList:result})
},
getRecommendList(){
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({recommendList:result})
}
})
小结
记住四个指令就行：
wx:for，绑定一个数组。wx:key。唯一的字符串或数值。要么是数组元素item的某个属性，要么是*this（此时，item本身是一个唯一的字符串或数值）。wx:for-item。默认数组当前元素的变量名为item，可以使用wx:for-item重新指定当前元素的变量名。wx:for-index。默认数组当前元素的下标变量名为index，可以使用wx:for-index重新指定当前元素的下标变量名。