微信小程序导航组件——电影界面

 

页面一

WXML:

<view class="">
<swiper autoplay class="movie-swiper" indicator-dots="{{true}}">
<swiper-item class="movie" wx:for="{{weekMovieList}}" wx:key="{{item}}">
<view class="outer movie-card">
<view class="img">
<image class="movie-image" src="{{item.imagePath}}"></image>
</view>
<text>第{{index+1}}周：{{item.name}}</text>
<text>点评：{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}" style="font-size: 50rpx;font-weight: bold;color: maroon;">强烈推荐</text>
</view>
</swiper-item>
</swiper>
</view>

WXSS:

.outer{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-items: center;
  text-align: center;
}
.img{
  flex-direction: column;
  justify-items: center;
  text-align: center;
}
.movie-image{
  width: 250rpx;
  height: 250rpx;
}
.movie-swiper{
  height: 90vh;
}
.movie-card{
  height: 100%;
  width: 100%;
}

JS：

Page({
  data: {
    weekMovieList:[
      {
        name:"西游记",
        comment:"师徒四人和一匹白马",
        imagePath:"/images/xyj.jpeg",
        isHighlyRecommended:true
      },
      {
        name:"教父",
        comment:"最精彩的剧本，最真实的黑帮电影",
        imagePath:"/images/jf.jpg",
        isHighlyRecommended:false
      },
      {
        name:"肖申克的救赎",
        comment:"机会总是留给有准备的人",
        imagePath:"/images/xsk.jpeg",
        isHighlyRecommended:false
      }
    ]
  },

页面二

WXML:

<view class="outer">
<view class="img">
<image src="/images/head.jpg" class="img1"></image>
</view>
<text style="font-weight: bold;font-size: 60rpx;">电影周周看</text>
<view>
<text>我</text><navigator style="display:inline" url="/pages/weekly/weekly" open-type="switchTab" hover-class="nav-hover" class="nav-default">每周推荐</navigator><text>一部好片</text>
</view>
<text>我的微博:weibo.com/simbasong</text>
</view>

WXSS:

.outer{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-items: center;
  text-align: center;
}
.img{
  flex-direction: column;
  justify-items: center;
  text-align: center;
}
.img1{
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}
.nav-default{
color: blue;
}
.nav-hover{
  color: red;
}