“使用列表渲染wx-for改写新闻列表”的版本间的差异

2018年11月11日 (日) 02:44的最新版本

.

内容

对多篇文章进行整体处理，后期后台数据的处理更加方便一些

准备

在js脚本文件中把所要编写的内容整合为数组，对数组进行编写 var posts_content=[{

date:"Now 18 2016",
title:"正是虾肥蟹壮时",
post_img:"/image/post/crab.png",
content:"菊黄蟹正肥，品尝秋之味，徐志摩把，“看初花的荻芦”",
view_num:"112",
collect_num:"96",}, {
date:"Now 18 2016",
title:"正是虾肥蟹壮时",
post_img:"/image/post/crab.png",
content:"菊黄蟹正肥，品尝秋之味，徐志摩把，“看初花的荻芦”",
view_num:"112",
collect_num:"96", }]

涉及到的语法

for循环：对数据进行for循环

<block wx:for="{ {posts_key} }" wx"for-item="item" wx:for-index="idx"></block>

在for循环中

item指代的是子元素本身的对象

idx指代的是子元素的序号

<block>xxxxx</block>标签： 相当于一个括号，把应用的循环代码包裹起来，报包裹起来的代码视为一个整体，在对整体进行编写 <block> <view class="post-container">

 <view class="post-author-date">
 <image class="post-author" src="{ {author_img} }"></image>  
 <text class="post-date">{ {date} }</text>
 </view>
 <text class="post-title">{ {title} }</text>
 <image class="post-image" src="{ {post_img} }"></image>
 <text class="post-content">{ {content} }<text>
 <view class="post-like">
 <image class="post-like-image" src="../../image/ff.png"></image>
 <text class="post-like-font">{{collect_num</text>
 <image class="post-like-image"  src="../../image/ee.png"></image>
 <text class="font">{ {view_num} }</text>
 </view>
 </view></block>

注意事项：在image属性下绑定时需要加“”而在text下绑定是不需要 <image class="post-author" src="{ {suthor_img} }></image> <text class="post-title">{ {title} }</text>