代码实现

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;
　　width: 550rpx;
}
.movie-image{
　　width: 200rpx;
　　height: 200rpx;
}

.movie-swiper{
　　height: 90vh;
}
.movie-card{
　　height: 100%;
　　width: 100%;
　　background: #eee;
}

app.wxss
.container{
　　background-color: #fff;
　　height: 100vh;

　　diaplay: flex;  //它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来
　　flex-direction: column;  //主轴为垂直方向，起点在上沿
　　justify-content: space-ground;  //项目位于各行之前、之间、之后都留有空白的容器内
　　align-items;center;  //元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
}

 

标签：function,flex,about,实现,movie,代码,images,weekly
来源： https://www.cnblogs.com/qiangang/p/13775966.html