成都创新互联网站制作重庆分公司

第四个页面:制作电影资讯页面

笔记内容:第四个页面:制作电影资讯页面
笔记日期:2018-01-18

崇信ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联建站的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:13518219792(备注:SSL证书合作)期待与您的合作!


点击轮播图跳转到文章详情页面

之前的文章列表页面还有一个小功能没有实现,就是点击点击轮播图就能跳转到相应的文章详情页面,这个和点击文章列表跳转到文章详情页面的实现方式是一样的。

post.wxml修改轮播图代码如下:



    
    
      
      
    
    
      
    
    
      
    

post.js文件增加如下代码:

  onSwiperTap:function(event){
    // target和currentTarget的区别在于,前者代表的是当前点击的组件,后者代表的是事件捕获的组件
    // 在这段代码里,target代表image组件,currentTarget代表swiper组件
    var postId = event.target.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId,
    });
  },

加入tab选项卡

现在我们就可以开始编写电影资讯页面了,为此我们需要给我们的小程序加入一个tab选项卡,这样才能够方便的切换到不同的主题页面上。像这个tab选项卡这种常用的组件,微信已经提供了现成的,无需我们自己去实现。

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

官方的说明文档如下:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

注:tabBar 中的 list 属性是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

首先我们需要构建电影资讯页面的目录、文件,在pages目录下创建movies目录并在该目录下创建相应的文件:
第四个页面:制作电影资讯页面

在app.json里配置movies页面以及tabBar:

{
  "pages": [
    "pages/welcome/welcome",
    "pages/posts/post",
    "pages/posts/post-detail/post-detail",
    "pages/movies/movies"  // 配置movies页面
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/posts/post",  // 跳转的页面
        "text": "阅读"  // 选项卡的文本内容
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影"
      }
    ]
  }
}

配置完app.json后还需要修改welcome.js代码中的跳转方法,需要将原本的redirectTo方法修改成switchTab方法来实现页面的跳转。switchTab方法用于跳转到有 tabBar 选项卡的页面,并关闭其他所有非 tabBar 页面。修改代码如下:

Page({
  onTap:function(){
    wx.switchTab({
      url: "../posts/post",
    });
  },
})

官方文档如下:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxswitchtabobject

完成以上修改后,编译运行效果如下:
第四个页面:制作电影资讯页面

注:选项卡的顺序是与list里的元素顺序一致的。


完善tab选项卡

虽然我们已经完成了简单的选项卡效果,可是默认的样式实在不忍直视,所以我们还得完善这个tab选项卡。其实也很简单,加上两张图片就好了:

"tabBar": {
    "borderStyle":"white",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "阅读",
        "iconPath":"images/tab/yuedu.png",  // 没被选中时显示的图片
        "selectedIconPath":"images/tab/yuedu_hl.png"  // 被选中时显示的图片
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

完成效果:
第四个页面:制作电影资讯页面
第四个页面:制作电影资讯页面

tabBar里还有一个position属性,该属性可以设置选项卡居顶部或居底部,例如我要选项卡居顶部,就可以在app.json文件中加上这一句配置:

"position":"top",

完成效果:
第四个页面:制作电影资讯页面
第四个页面:制作电影资讯页面


电影页面嵌套template分析

我们需要做一个这样的电影资讯页面:
第四个页面:制作电影资讯页面

根据分析效果图,可以看到页面的布局是一排一排重复的的,每一排里都有三个电影,所以这样的重复性的布局以及样式我们可以做成一个template进行复用:
第四个页面:制作电影资讯页面

当点击 “更多” 时进入的页面效果图如下:
第四个页面:制作电影资讯页面

从效果图,可以看到图片、电影名称以及评分都是和电影资讯页面上的布局以及样式是重复的,所以我们还需要把这部分做成第二个template进行复用:
第四个页面:制作电影资讯页面

再来看一张效果图:
第四个页面:制作电影资讯页面

这是电影的详情页面,这里也用到了一个评分样式,这个样式也是重复的,所以我们还需要把这个样式做成第三个template进行复用。


3个嵌套template标签的实现

先创建好各个template的目录结构:
第四个页面:制作电影资讯页面

我这里是先实现评分样式的template:

stars-template.wxml内容如下:

stars-template.wxss内容如下:

.stars-container{
  display: flex;
  flex-direction: row;
}

.stars{
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}

.stars image{
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}

.star-score{
  color: #1f3463
}

然后就是电影列表的template了,movie-template.wxml内容如下: