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

àì夳堔傛蜴生んèń 2022-06-10 05:38 218阅读 0赞

> [微信小程序][Link 1]开发——阅读页面轮播图-新闻列表页面构建-数据绑定开发教程：
> 
> 今天打开微信官方文档发现轮播图组件更新了两个功能，但是目前暂未启用，估计过几天就能使用了。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <th style="">属性名</th> 
   <th style="">类型</th> 
   <th style="">默认值</th> 
   <th style="">说明</th> 
  </tr> 
 </tbody> 
 <tbody style=""> 
  <tr style=""> 
   <td style="">indicator-color</td> 
   <td style="">Color</td> 
   <td style="">rgba(0,0,0,.3)</td> 
   <td style="">指示点颜色 （这个属性目前暂未启用）</td> 
  </tr> 
  <tr style=""> 
   <td style="">indicator-active-color</td> 
   <td style="">Color</td> 
   <td style="">#000000</td> 
   <td style="">当前选中的指示点颜色 （这个属性目前暂未启用）</td> 
  </tr> 
 </tbody> 
</table>

## 最终的效果图： ##

![这里写图片描述][SouthEast]

## 代码部分： ##

下面我们来继续研究代码部分：  
wxml部分：

注意：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标签。

## 1、效果图预览 ##

![这里写图片描述][SouthEast 1]

## 2、准备工作 ##

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

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

## 3、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>

## 4、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;
    }

## 5、数据绑定 ##

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

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

如图，在根目录新建一个data文件夹，里面新建一个posts-data.[js][]文件  
![这里写图片描述][SouthEast 2]

## 5.1、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.2、post.wxml使用数据绑定： ##

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

## 5.3、post.js ##

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

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

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

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

## 6、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=”\{ \{数组名\}\}”

[Link 1]: http://9.cn/
[SouthEast]: /images/20220610/2dd293dfc11347728b59bcef4b09a872.png
[js]: http://lib.csdn.net/base/javascript
[SouthEast 1]: /images/20220610/3f7a5f8e44cf48e7baa1fcbb34713eb3.png
[SouthEast 2]: /images/20220610/61364b6e71de459b97041e22765eb533.png