仿豆瓣电影微信小程序

2019年12月26日

效果：

image.gif

二.电影首页实现

1.顶部切换效果实现

image.png

.nav {
  display: flex;
  flex-direction: row;
  background-color: #222;
}

.select {
  width: 32%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  border-bottom: 10px solid #777;
}

.normal {
  width: 32%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 13px;
}

.line {
  height: 45px;
  line-height: 45px;
  font-size: 25px;
  color: #666;
}

2.底部切换内容布局实现 用swiper实现

image.png image.png

3.电影海报轮播效果 也用swiper实现

image.png

4.电影列表布局实现

image.png image.png image.png

三.详情页面实现

1.详情页面跳转实现

image.png

2.高度先写死，不然要动态计算

image.png

3.动态设置标题

image.png