小程序循环使用“假数据”进行页面渲染增加代码复用

Posted 2020-10-10

　　如今开发中，前后端分离的开发方式已经深入人心了。真正独立开发过前后端的开发者都知道，使用“假数据”在前端进行渲染页面，那么后期只需在服务器连接数据库调用数据即可。今天，我们来看看在小程序如何实现循环假数据进行页面渲染。

　　在JS文件中构造假数据：

1.在onload函数中声明数组（存放json数据）：

onLoad: function (options) {

//页面初始化options为页面跳转所带来的参数

var posts_content = [

{

date: ‘OCT 12 2016‘,

title: ‘葉秋月‘,

post_img: ‘/image/post/crab.png‘,

author_img: ‘/image/avatar/1.png‘,

img_condition: true,

content: ‘《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,

view_num: ‘999‘,

collect_num: ‘999‘

},

{

date: ‘OCT 12 2016‘,

title: ‘葉秋月‘,

post_img: ‘/image/post/bl.png‘,

author_img: ‘/image/avatar/1.png‘,

img_condition: true,

content: ‘《你的名字。》是由新海诚执导，由神木隆之介、上白石萌音担任主要配音的一部原创日本动画电影‘,

view_num: ‘999‘,

collect_num: ‘999‘

}

]

 

2.设置数据，发送到JS文件中的dataJSON对象中：

this.setData({

posts_key:posts_content});

console.log(this);

}

//这里的this时当前页面的post对象，由它调用方法setData。

 

　　在wxml文件中使用循环语句调用假数据：

//item是元素，index是元素索引，从0开始

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

<view class=‘post-container‘>

<view class=‘post-author-date‘>

<image wx:if="{{item.img_condition}}" src=‘{{item.author_img}}‘ class=‘post-author‘></image>

<text class=‘post-date‘>{{item.date}}</text>

</view>

<text class=‘.post-title‘>{{item.title}}</text>

<image class=‘post-image‘ src=‘{{item.post_img}}‘></image>

<text class=‘post-content‘>{{item.content}}</text>

<view class=‘post-like‘>

<image src=‘../../image/icon/chat.png‘ class=‘post-like-image‘></image>

<text class=‘post-like-font‘>{{view_num}}</text>

<image src=‘../../image/icon/view.png‘ class=‘post-like-image‘></image>

<text class=‘post-like-font‘>{{collect_num}}</text>

</view>

</view>

</block>