1.

我们在做Android开发时,几乎每个app都有几个列表,在Android中列表一般是用listview，后来就使用recyclerview做了,不管是小程序还是Android或者ios，列表都是常见的一种数据展示方式,那么在小程序中怎么实现呢？先使用最笨的方法做,

2.

如图：

3.

右边有个滚动条很难看,这就好比Android的listview有个默认的滚动条,那么去掉这个滚动条呢？查文档,可惜文档没有这个属性,算了留在这里以后再弄

4.

除非列表数据都是静态的才可以这么弄,就算是静态的数据也不会这么弄,太笨了,肯定还有更好的方法,先把变成动态的,之前发布的博客写了关于数据绑定,现在就能用的上呢？我们在每个Page下有个datajson里面可以写入json数据,然后wxml数据就动态的绑定到data中的json，比如：textclass'date'{{date}}/text

data:{date:"2018-11-13",condition:false},5.

组件text中的数据就是来自datajson下的date数据

6.

修改wxml文件改成数据动态绑定：

viewviewclass'posts-container'viewclass'posts-author_date'imagesrc'{{img}}'class'user_authr'/imagetextclass'date'{{date}}/text/viewimagesrc'{{content_img}}'class'posts_detail_img'/imagetextclass'posts_title'{{content}}/textviewclass'posts-bottom-like'imagesrc'{{chat_icon}}'class'posts-like'/imagetextclass'like-text'{{collect}}/textimagesrc'{{reply_icon}}'class'reply-like'/imagetextclass'reply-text'{{replyCount}}/text/view/viewviewclass'posts-container'viewclass'posts-author_date'imagesrc'{{img}}'class'user_authr'/imagetextclass'date'{{date}}/text/viewimagesrc'{{content_img}}'class'posts_detail_img'/imagetextclass'posts_title'{{content}}/textviewclass'posts-bottom-like'imagesrc'{{chat_icon}}'class'posts-like'/imagetextclass'like-text'{{collect}}/textimagesrc'{{reply_icon}}'class'reply-like'/imagetextclass'reply-text'{{replyCount}}/text/view/viewviewclass'posts-container'viewclass'posts-author_date'imagesrc'{{img}}'class'user_authr'/imagetextclass'date'{{date}}/text/viewimagesrc'{{content_img}}'class'posts_detail_img'/imagetextclass'posts_title'{{content}}/textviewclass'posts-bottom-like'imagesrc'{{chat_icon}}'class'posts-like'/imagetextclass'like-text'{{collect}}/textimagesrc'{{reply_icon}}'class'reply-like'/imagetextclass'reply-text'{{replyCount}}/text/view/view/view7.

数据来源：

/***页面的初始数据*/data:{date:"2018-11-13",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:90,replyCount:40,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},8.

其实这个data--json中的数据我们看起来也是静态写死的,那么我就在Page生命周期函数onLoad中去模拟网络数据请求后再绑定数据：

9.

现在把datajson对象为空,把里面的数据写在onLoad()方法中：

onLoad:function(options){vardataList{date:"2018-11-13",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:90,replyCount:40,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"}this.setData(dataList);},10.

this.setData(dataList)就相当于把变量dataList对应的json写到data:{}里面

11.

现在问题又来了,我们是一个布局,上面的每个item中的每个子控件显示的数据都是一样的,这肯定是不对的现在做下组件复用,就好比我们android使用listview来展示数据,

12.

记得在你子组件中添加block父组件：

viewblockviewclass'posts-container'viewclass'posts-author_date'imagesrc'{{img}}'class'user_authr'/imagetextclass'date'{{date}}/text/viewimagesrc'{{content_img}}'class'posts_detail_img'/imagetextclass'posts_title'{{content}}/textviewclass'posts-bottom-like'imagesrc'{{chat_icon}}'class'posts-like'/imagetextclass'like-text'{{collect}}/textimagesrc'{{reply_icon}}'class'reply-like'/imagetextclass'reply-text'{{replyCount}}/text/view/view/block/view13.

可以把block理解成for循环中的{}号

viewblockwx:for"{{posts_key}}"wx:for-item"item"viewclass'posts-container'viewclass'posts-author_date'imagesrc'{{item.img}}'class'user_authr'/imagetextclass'date'{{item.date}}/text/viewimagesrc'{{item.content_img}}'class'posts_detail_img'/imagetextclass'posts_title'{{item.content}}/textviewclass'posts-bottom-like'imagesrc'{{item.chat_icon}}'class'posts-like'/imagetextclass'like-text'{{item.collect}}/textimagesrc'{{item.reply_icon}}'class'reply-like'/imagetextclass'reply-text'{{vitem.replyCount}}/text/view/view/block/view14.

js中：

/***生命周期函数--监听页面加载*/onLoad:function(options){vardataList[{date:"2018-11-13",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:90,replyCount:40,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-14",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:91,replyCount:41,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-15",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:92,replyCount:42,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-16",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:93,replyCount:43,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-17",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:94,replyCount:44,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-18",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:95,replyCount:45,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},{date:"2018-11-19",condition:false,content:"菊黄蟹正肥，品尝秋之味。徐志摩把,“看初花的荻芦”和“到楼外楼吃蟹”,并列为秋天来杭州不能错过的风雅之事；用林妹妹的话讲是“螯封嫩玉双双满",collect:96,replyCount:46,img:"/images/user_header.png",reply_icon:"/images/view.png",chat_icon:"/images/chat.png",content_img:"/images/cat.png"},]this.setData({posts_key:dataList});},15.

这是在onLoad()生命周期方法中定义了一个变量,如果定义的变量时对象的话,可以使用this.setData(变量名);如果是数组或者集合的话就不能这么弄了,要这么写：

this.setData({posts_key:dataList});16.

这个就相当于在data:{posts_key:dataList}还有就是在blockwx:for{{传递的是key}},还有一点,这里：

blockwx:for"{{posts_key}}"wx:for-item"item"17.

wx:for-item"item"其实可以看做是java中ListPerson集合中遍历Personpersonlist.get(i);这个person变量相当于item，当然也可以不指定它默认就是item,当然这个wx:for-item""这字符串中的值你可以随便定义都行,比如testperson都是OK的，如果你想拿到集合中的下标值,可以这么做在block中添加wx:for-index"idx"这个idx就相当于下标值了。