# 微信小程序开发-新闻列表绑定

**Repository Path**: djcx/WeiXinXiaoChengXuKaiFa-XinWenLieBiaoBangDing

## Basic Information

- **Project Name**: 微信小程序开发-新闻列表绑定
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2017-08-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

微信小程序开发-新闻列表之新闻列表绑定开发教程：

1、效果图预览

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180051_f295ad40_1392442.png "QQ图片20170803180143.png")

这里写图片描述

2、准备工作

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

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

3、wxml部分

新闻列表部分整体使用flex纵向布局比较合适， 
先把页面内的元素标签和类名写好。
    ![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180535_0ca3628f_1392442.png "1.png")
 
4、wxss部分

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180552_e2080669_1392442.png "2.png")
![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180606_6c9fecad_1392442.png "3.png")
 
5、数据绑定

数据绑定很重要，那么多的新闻列表，不可能每个新闻都复制粘贴一下代码。况且小程序还限制在1MB大小。
我们把数据内容单独放在一个文件夹里，模拟从网络加载的情况
如图，在根目录新建一个data文件夹，里面新建一个posts-data.js文件 
这里写图片描述

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180005_cc58c3d4_1392442.jpeg "20170206160454774.jpg")
5.1、posts-data.js

在posts-data.js里定义一个local_database数组
![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180702_885458e4_1392442.png "4.png")
 
别忘了在posts-data.js文件最后加上输出

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180728_89544c62_1392442.png "5.png")
 
5.2、post.wxml使用数据绑定：

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

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180828_0462d66d_1392442.png "6.png")
 
5.3、post.js

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

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180851_3b06944c_1392442.png "7.png")
 
然后在onLoad: 函数内设置Data的值

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180909_bf9557c8_1392442.png "8.png")
 
6、for循环

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

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180934_eb1d9a97_1392442.png "9.png")

语法是：
wx:for=”{{数组名}}”

想要更多小程序开发源码资源，关注第九程序公众号获取：

![输入图片说明](https://git.oschina.net/uploads/images/2017/0803/180136_01d1de75_1392442.jpeg "qrcode_for_gh_812f6af9d7ca_258 (1).jpg")