微信小程序入门到实战(三)
数据绑定(二)
上一遍文章的结尾介绍了小程序简单的数据绑定方式,但是核心要知道:数据绑定,都是借用data
这个属性作为一个中转地,服务器上面获取的数据,经过处理,使用this.setData()
方法绑定到data属性
中的一个变量,在通过这个变量绑定到页面上面。
接下来说一下数据绑定的其他用途:
标签的显隐
前面说到,小程序里面没有dom
的概念,就不能通过标签的display
和visibility
属性来控制,那怎么控制呢?
在小程序里面,对于一个标签的属性值是true / false
的时候,在绑定数据的时候,就会对其中的数据进行布尔值的比较,有值就为真,绑定的数据是false
或者是空的时候就是假;
<swiper wx:if='{{date}}' catchtap='onSwiperTab' indicator-dots='{{date}}' vertical='{{false}}' autoplay='{{false}}' interval='5000'><swiper-item><image src='/images/post/bl.png' data-postid='3'></image></swiper-item><swiper-item><image src='/images/post/xiaolong.jpg' data-postid='2'></image></swiper-item></swiper>
就拿前面说的轮播组件来说,当我在对应的页面data
属性里面设置date
的值的时候,只要不为空或者false
,那么swiper
中的两个通过绑定数据的方式设置属性值的属性,其属性值就都会被解析为true
。那个直接设置false
的autoplay
属性就不会自动轮播。
注意那个wx:if='{{date}} '
,才是控制标签显示和隐藏的关键。如果date
是真,那么wx:if='{{date}} '
结果为真,就会显示轮播组件,如果date
是假,那么wx:if='{{date}} '
结果为假,就会隐藏轮播组件
图片的切换
通常我们做图片的切换,一般是通过改变图片的路径来实现;在小程序里面可以使用if else
动态的控制图片的切换。
类似上面说的控制标签的显示和隐藏,也要使用到数据绑定:
<view class='circle-img'><image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image><image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image><image catchtap='onShareTap' class='share-img' src='/images/icon/share.png'></image></view>
上面代码里面,只显示两张图片,通过collected
这个从服务器传过来的标识,来判断是显示wx:if='ture'
的图片,还是显示wx:else
的图片,两者选其一,很方便的控制了图片的切换。
数据的循环
通常编写页面的时候,想把相同的区域呈现多次,又不想编写冗余的代码,小程序里面通过一个属性:wx:for='{{数据源}}'
<view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'><view catch:tap='onBind'>{{item.date}}</view><view catch:tap='onBind'>{{item.title}}</view><view catch:tap='onBind'>{{item.content}}</view>
</view>
// Page页面中的数据源onLoad: function (options) {var datasArr = [{date: '2018/2/3',title: '神盾局特工1',content: '神盾局特工这个礼拜六停播,说好的不冬歇的呢?'}, {date: '2018/2/3',title: '神盾局特工2',content: '神盾局特工科学组CP要结婚啦!'}]this.setData({ datesArry: datasArr }) // this.setData(datasArr) setData 方法接收的是一个对象,而不是数组}
我们把要呈现多次的区块,用一个标签包裹view / block
,然后在其上面作用于wx:for
属性,接收一个数组或者集合的数据,datesArry
就是要循环的数据数组,wx:for-item='item' wx:for-index='idx'
中的item
是被循环的子对象,idx
是对应子对象在数据数组里面的索引位置;这两个值都默认是有的,即使不写。
前面也说道过,this.setData()
方法是把里面接收到的数据,绑定到Page
下面的data属性
里面,然后在展示在页面中,小程序的数据绑定,都是从Page
中的data属性
中读取数据去完成数据绑定。这个读取data
属性中的数据去绑定到页面的动作是发生在onLoad
事件之后的。
既然这么说的话,那么可不可以直接给data
对象身上直接添加属性,并且直接赋值:this.data.datesArry=datasArr
,这样是绑定不了数据到页面上,虽然不会报错,小程序的前期版本里面是可以这样绑定数据的。所以都建议使用this.setData()
方法去主动更新数据。
要是数据是存放在其他的文件夹下面,应该怎么样读取呢?在数据文件中,通过抛出一个数据出口,来通过其他文件进行访问:
module.exports = {postList: dataBase // 数据数组的名字
}
在要使用数据的js
文件下,引入要使用数据的路径,应该在page
外面引入:
var postsData = require('数据文件所在的路径');
注意这个require
中的路径名是相对路径,不能是绝对路径。
微信小程序入门到实战(三)相关推荐
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 【DRF+Django】微信小程序入门到实战_day03(下)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档 微信开放文档 # 课程内容 (1)P28_发送短信验证码 ...
- 【DRF+Django】微信小程序入门到实战_day01(下)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 文档链接 微信开放文档 # 课程内容 (1)flex 布局 (2)fle ...
- 微信小程序入门与实战笔记
微信小程序 目录 微信小程序 1微信小程序介绍 1.1什么是微信小程序 1.2小程序特点 1.3对开发者的影响 1.4分辨率与rpx 1.4.1英寸 1.4.1分辨率(pt): 1.4.2分辨率(px ...
- 【DRF+Django】微信小程序入门到实战_day04(上)
(0)摘要 # 课程链接 入门到实战,讲讲公司的微信小程序[django+drf+小程序实战]_哔哩哔哩_bilibili # 微信开发者文档 微信开放文档 # 课程内容 (1)P28_用户登录页面 ...
- 微信小程序入门与实战之rpx响应式单位与flex布局
新建页面的技巧与规则 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: app.json必须有一个pages数组: ...
- 微信小程序入门与实战之初识小程序的自定义组件
文章列表顶部轮播图跳转 为每个轮播图设置点击响应函数,为其设置参数为文章的id 小程序tabBar选项卡配置基础 我们在app.json配置tabBar选项卡: "tabBar": ...
- 微信小程序入门与实战之条件渲染、列表渲染与小程序事件
使用LinUI的Icon组件代替图片ICON 引入LinUI的icon库: "usingComponents": {"l-icon":"/minipr ...
- 微信小程序入门到实战(二)
上一文章里面,我们实现了第一个小程序页面,并且了解到了一些小程序的知识,接下来继续开始我们的学习. 页面的跳转 在第一个小程序页面,预留了一个按钮,这是为了跳转到其他的页面,在微信小程序里面跳转的方法 ...
最新文章
- [科普]浅入浅出Liunx Shellcode
- pandas如何统计所有列的空值,并转化为list?
- 音视频技术开发周刊 70期
- C++异常以及错误处理
- PAT:1032. Sharing (25) AC
- android4.4.2 以太网代理,Android2.3.4系统添加Ethernet框架支持
- vs编译与停止调试时卡顿、无响应的问题
- dell笔记本重装win10系统超详细的教程(适用所有windows系统的一套流程)
- 区块链项目需要服务器吗,区块链需要服务器吗
- 72分辨率下1厘米等于多少像素,300分辨率下1厘米等于多少像素
- skyeye linux qt,Ubuntu 16.04上安装SkyEye及测试
- 苹果手机永久删除的照片怎么恢复?
- Jenkins配置定时任务
- C++ ARX二次开发视图
- (solved)[/usr/bin/python2: No module named pip]
- 【Vitis Accel】1 - HLS 简介
- python自制简易二维码代码_用python把自己的二维码制作成动态码,一行代码即可搞定!敲简单!...
- Python教程之粒子运动轨迹动态绘图
- BP神经网络的数学表达式
- CSS开发技巧实用记(一)