新闻列表页flex_微信小程序新闻网站列表页

javascript

技术文章

开发

微信小程序新闻网站列表页

在app.json中可以设置所有文件的头部导航颜色

(是window属性的子属性)

在具体页面可以单独设置该页面的导航颜色

(直接写该属性，不需要写window属性)

查看官方文档，可以看到好多全局属性

而页面配置会覆盖部分window配置

在post.json中添加：

{"navigationBarTitleText":"文与字"}

可以实现导航的文字

在小程序中，有些时候使用绝对路径会报错，比如import

因此当你使用绝对路径报错时，可以尝试换成相对路径，也许问题就解决了。

js中的data属于单向数据绑定，data中改变的数据，在wxml中会自动更新

但是在wxml中改变的数据，不会同步更新到js中(可以通过事件来完成同步)

示例：

在posts.js的data中定义date

在posts.wxml中使用双花括号绑定数据

显示

setData方法绑定数据

通常从服务器加载的数据会放到onload函数中

在post.wxml中，使用双花括号绑定数据

{ {date}}

{ {title}}

{ {content}}

{ {collection}}

{ {reading}}

完成绑定

双花括号里面还可以进行一些运算，比如拼接字符串

数据加减

条件渲染wx-if

wx-if的值，如果转换为true，则元素显示；转换为false，则元素不显示

通常会放一个变量，在js中定义好变量

给元素添加wx:if判断，false代表不显示

列表渲染wx-for

首先在onload函数中定义好数据，一般是数组形式的

然后使用this.setData把数据传递到data中

要注意的是！传递的数据必须是js对象！如果是数组，记得加上key转换为对象形式

在wxml中，给要循环的部分用block包起来，wx:for 属性值填写数据的key，wx:for-item里是循环的每一项的别名

另一种比较简单的数组转对象的方法：

这是ES6的对象简写方法，相当于{post_content: post_content}

小程序是支持es6语法的

另外，wx:for-item="item" 是可以删除的，循环的每一项默认的别名就是item

如果你使用的别名不是item，则必须在该属性中指明

获取索引：

当然，如果不指定的话，默认索引就是index

小程序的事件机制——捕捉与回调

实现点击按钮跳转到另一个页面

这是app.json，默认显示的是welcome.wxml