微信小程序开发实战&电影小程序——阅读页面轮播图-新闻列表页面构建-数据绑定

时间 2019-12-05

标签微信程序开发实战阅读页面列表构建数据绑定繁體版

原文原文链接

微信小程序开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程：javascript

今天打开微信官方文档发现轮播图组件更新了两个功能，可是目前暂未启用，估计过几天就能使用了。java

属性名	类型	默认值	说明
indicator-color	Color	rgba(0,0,0,.3)	指示点颜色（这个属性目前暂未启用）
indicator-active-color	Color	#000000	当前选中的指示点颜色（这个属性目前暂未启用）

最终的效果图：

代码部分：

下面咱们来继续研究代码部分：
wxml部分：小程序

<view>
  <swiper indicator-dots="true" autoplay="true" interval="2000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
    </block>
  </swiper>
</view>

注意：swiper-item仅可放置在swiper组件中，宽高自动设置为100%。微信小程序

js部分：数组

data:{
    imgUrls: [
      '/images/wx.png',
      '/images/vr.png',
      '/images/iqiyi.png'
    ]
  },

js文件中定义了一个数组，里面存放图片的路径微信

wxss代码：网络

swiper,swiper image {
  width: 100%;
  height: 500rpx;
}

注意：轮播图组件的宽高样式须要设置在swiper标签上，官方文档中没有说明，只能一个一个试，最后的结论是必须定义在swiper标签。xss

一、效果图预览

二、准备工做

在拿到效果图后不要先急着去写代码，而是要去分析一下页面的总体结构，用什么方式定位和布局。小程序里建议使用flex布局，由于小程序对flex的支持是很好的。函数

上一篇博客中完成了轮播图部分，接下来继续完成下面的新闻列表部分布局

三、wxml部分

新闻列表部分总体使用flex纵向布局比较合适，
先把页面内的元素标签和类名写好。

<view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="{{item.view_img}}"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="{{item.collect_img}}"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>

四、wxss部分

.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}
.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{

  width: 100%;
  height: 340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-image{
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

五、数据绑定

数据绑定很重要，那么多的新闻列表，不可能每一个新闻都复制粘贴一下代码。何况小程序还限制在1MB大小。

咱们把数据内容单独放在一个文件夹里，模拟从网络加载的状况

如图，在根目录新建一个data文件夹，里面新建一个posts-data.js文件

5.一、posts-data.js

在posts-data.js里定义一个local_database数组

var local_database=[
      {
        date:"Nov 10 2016",
        title:"文章标题1",
        imgSrc:"/images/post/crab.png",
        avatar:"/images/avatar/1.png",
        content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
        reading:"92",
        collection:"65",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      },
      {
        date:"Nov 20 2016",
        title:"文章标题2",
        imgSrc:"/images/post/bl.png",
        avatar:"/images/avatar/2.png",
        content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
        reading:"88",
        collection:"66",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      },
      {
        date:"Nov 25 2016",
        title:"文章标题3",
        imgSrc:"/images/post/cat.png",
        avatar:"/images/avatar/3.png",
        content:"文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介文章简介",
        reading:"123",
        collection:"55",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      }
    ]

别忘了在posts-data.js文件最后加上输出

module.exports={
        postList:local_database
    }

5.二、post.wxml使用数据绑定：

例如用户头像图片的路径，用双大括号括起来里面和数组里定义的要相同，而后前面要加上item. 意思是绑定数组里定义的avatar，代码以下：

<image class="post-author" src="{{item.avatar}}"></image>

5.三、post.js

先把posts-data.js文件引入：

var postsData=require('../../data/posts-data.js')

而后在onLoad: 函数内设置Data的值

onLoad:function(options){
    // 生命周期函数--监听页面加载
    this.setData({
      posts_key:postsData.postList
    })
  },

六、for循环

在wxml要循环的部分外面加上<block> </block>标签

<block wx:for="{{posts_key}}" wx:for-item="item">
<view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="{{item.view_img}}"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="{{item.collect_img}}"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>
</block>

语法是：

wx:for=”{{数组名}}”