about.wxml
<view class='container'>
<text style='font-weight: bold; font-size: 60rpx;'> 电影周周看</text>
<view>
<text>我</text>
<navigator style='display: inline' url='/pages/weekly/weekly' open-type='navigate' hover-class='nav-hover'>每周推荐</navigator>
//open-type="switchTab" 页面跳转的的同时底部导航栏也会切换
<text>一部好片</text>
</view>
<text>我的微博</text>
</view>
app.json
{
"pages":[
"pages/about/about"
],
"tabBar":{
"list": [
{
"text": "每周推荐",
"pagePath": "pages/weekly/weekly",
"iconPath": "images/icons/weekly.png"
"selectedIconPath": "images/icons/weekly-selected.png"
},
{
"text": "关于",
"pagePath": "pages/about/about",
"iconPath": "images/icons/about.png",
"selectedIconPath": "images/icons/about-seleted.png"
}
],
"color": "#000",
"selectedColor": "#000"
}，
"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "电影周周看"
}
}
weekly.js
Page({
data: {
thisWeekMovie: [{
name: "教父",
comment: "最精彩的剧本，最真实的黑帮电影。",
iamgePath: "/images/jf.jpg",
isHighlyRecommended: false
},],
currentIndex: 0
}
onLoad: function(optins){
this.setData({
currentIndex: this.data.weeklyMovieList.length-1
})
}
onShow: function(option){} //onLoad onShow onReady在页面渲染先后被调用
onReady: function(option){}
onHide: function(option){}
onUnload: function(option){}
})
weekly.wxml
<view class=''>
<swiper class='movie-swiper' indicator-dots='{{true}}' current={{currentIndex}}> //indicator-dots是否显示页面位置标识 current={{currentIndex}}页面初始展示最后一张
<swiper-item class='movie' wx:for="{{weeklyMovieList}}"> //wx:for 循环语句，item为循环元素 index为item的下标
<view class='container movie-card'>
<image class='movie-image' src='{{item.imagePath}}'></image>
<text>第{{index+1}}周{{item.name}}</text>
<text>点评:{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px; color:red;">强烈推荐</text> //需要频繁切换isHighlyRecommended的取值时使用wx 反之使用hidden
</view>
</view>
</view>
weekly.wxss
.movie{
display: flex;
}
.movie-details{
display: flex;
flex-direction: column;
550rpx;
}
.movie-image{
200rpx;
height: 200rpx;
}
.movie-swiper{
height: 90vh;
}
.movie-card{
height: 100%;
100%;
background: #eee;
}
app.wxss
.container{
background-color: #fff;
height: 100vh;
diaplay: flex; //它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来
flex-direction: column; //主轴为垂直方向，起点在上沿
justify-content: space-ground; //项目位于各行之前、之间、之后都留有空白的容器内
align-items;center; //元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
}