查看“使用列表渲染wx-for改写新闻列表”的源代码
←
使用列表渲染wx-for改写新闻列表
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
. ==内容== 对多篇文章进行整体处理,后期后台数据的处理更加方便一些 ==准备== 在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>
返回至
使用列表渲染wx-for改写新闻列表
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息