问题描述
“数据绑定”是前端框架技术中的一个概念,比如微信小程序开发中的数据绑定。那么为什么要进行数据绑定?如何进行数据绑定呢?
解决方案
数据绑定的作用就是为了实现一种动态的效果,即后台数据更新时前端页面也自动更新;前端页面上的数据更新时后台的数据也自动更新。这无疑可以使前端的开发更加高效。
下面就用实例来演示如何进行数据绑定:
创建好项目后,清空index下wxml,js,wxss文件下所有内容,进入App.json,修改导航栏标题。再在index.wxml进行界面布局,代码如下:
<view class="content"> <view class="today"> <view class="info"> <view class="temp">℃</view> <view class="lowhigh"></view> <view class="type"></view> <view class="city"></view> <view class="week"></view> <view class="weather"></view> </view> </view> </view> |
进入index.js,在data提供数据,代码如下:
Page({ data:{ temp:"14", low:"10℃", high:"15℃", type:"阴", city:"成都", week:"星期六", weather:"东南风 微风级" } }) |
进入index.wxml,将data提供的数据绑定到页面,代码如下:
<view class="content"> <view class="today"> <view class="info"> <view class="temp">{{temp}}℃</view> <view class="lowhigh">{{low}}/{{high}}</view> <view class="type">{{type}}</view> <view class="city">{{city}}</view> <view class="week">{{week}}</view> <view class="weather">{{weather}}</view> </view> </view> </view> |
进入index.wxss,将index.wxml添加样式,代码如下:
.content{ font-family: 微软雅黑 , 宋体 ; font-size: 14px; background-size: cover; height: 100%; width: 100%; color:#333333; } .today{ padding-top:70rpx; height:50%; } .temp{ font-size:80px; text-align:center; } .city{ font-size:20px; text-align:center; margin-top:20rpx; margin-right:10rpx; } .lowhigh{ font-size:12px; text-align:center; margin-top:30rpx; } .type{ font-size:16px; text-align:center; margin-top:30rpx; } .week{ font-size:12px; text-align:center; margin-top:30rpx; } .weather{ font-size:12px; text-align:center; margin-top:20rpx; } |
最终效果图:
结语
要熟悉小程序的开发流程,在js里提供数据,在wxml里绑定数据,在wxss里添加样式。将js里的data通过数据绑定的方式就可以在wxml里通过双大括号的方式将数据值显示出来,动态地加载数据,以实现数据绑定的动态效果。
END