|
1、数据绑定 小程序的数据绑定放弃了DOM结构，不用像html那样先获取DOM，然后再赋值给标签。小程序的数据绑定是单向的（从逻辑层(js)到UI层） （1）简单绑定： data: {
msg: 'hello!'
}
<view>{{msg}}</view> （2）运算 <view>{{a+b+c}}</view> data: {
a: 1,
b: 2,
c: 3
}
（3）数组 <view wx:for="{{[a,b,c, 1, 2, 3, 4]}}"> {{item}} </view> data: {
a: 1,
b: 2,
c: 3
}
（4）组件的属性 初始化颜色的值并在属性中获取该值作为属性的值： data: { num:5, color:"red" }, <view style="color:{{color}}">nihao</view> （5）修改data属性的值的方法(不能采用传统的等号的赋值方法) <view style="color:{{color}}">nihao</view> <button bindtap="changecolor">点击变色</button> changecolor(){ this.setData({ color:'yellow' }) }, data的原始color值为red，这里点击按钮的时候调用函数，将颜色修改为了yellow data: { num:5, color:"red" }, 点击按钮前： 点击按钮后： （6）数组、对象 data: { object: { key: 'Hello ' }, array: ['MINA','TOM'] }, <view>{{object.key}} {{array[1]}}</view>
对象是以属性名和属性值的形式存储，可以用属性名获取值 数组可以通过下标获取数组的相应位置的值
2、列表渲染 （1）微信小程序中的for循环 <view wx:for="{{4}}">晚上好</view> （2）for循环遍历数组 定义数组： data: {
arr:[1,2,3,4]
}
绑定数组显示数组的数据： <view wx:for="{{arr}}"> {{item}}------{{index}} </view> item：当前值 index：当前值的下标 （3）循环的优化（block标签的应用） VIEW方式： 定义数组： data: { array: ['MINA','TOM','xiaoming'] }, 绑定数组，显示数据： <view wx:for="{{array}}"> <view>{{item}}------{{index}}</view> </view>
查看页面元素，有多余的view： BLOCK方式： <block wx:for="{{array}}"> <view>{{item}}------{{index}}</view> </block> 查看页面元素已经没有多余的view标签了：
（4）wx：key（唯一标识符，可以提高列表渲染的效率） <block wx:for="{{array}}" wx:key="index"> <view>{{item}}------{{index}}</view> </block>
3、条件渲染 数据： data: {
num:5
}
对数据进行判断（符合相应的条件才去渲染）： <view wx:if="{{num > 5}}"> num大于5 </view> <view wx:elif="{{num < 5}}"> num小于5 </view> <view wx:else> num等于5 </view> 结果：
4、练习（九九乘法表） 准备数据： data: { number:[1,2,3,4,5,6,7,8,9] }, 运用循环的嵌套取出数据完成乘法表的显示： <view wx:for="{{number}}" wx:for-item="i" class="row"><!--外层循环i,内层循环j小于等于i--> <view wx:for="{{number}}" wx:for-item="j" wx:if="{{j<=i}}" class="col"> {{i}}*{{j}}={{i*j}} </view> </view> 样式： .row{ display:flex; justify-content: flex-start; font-size: 8px; } .col{ width: 11.1111%; } 测试结果：
5、练习（导航条） （1）初始化数据： 前面的一个数组存储的是对象，作为导航栏的信息，后面的一个数组存储的是文本信息 data: { t:[{ name:"全部", sub:1 }, { name:"精华", sub:2 }, { name:"分享", sub:3 }, { name:"问答", sub:4 }, { name:"招聘", sub:5 } ], arr :['《将进酒·君不见黄河之水天上来》', ' 君不见黄河之水天上来，奔流到海不复回', ' 君不见高堂明镜悲白发，朝如青丝暮成雪。', '人生得意须尽欢，莫使金樽空对月。', '天生我材必有用，千金散尽还复来。', '烹羊宰牛且为乐，会须一饮三百杯。', '岑夫子，丹丘生，将进酒，杯莫停。', '与君歌一曲，请君为我倾耳听。', '钟鼓馔玉不足贵，但愿长醉不复醒。', '古来圣贤皆寂寞，惟有饮者留其名。', '陈王昔时宴平乐，斗酒十千恣欢谑。', '主人何为言少钱，径须沽取对君酌。', '五花马，千金裘，', '呼儿将出换美酒，与尔同销万古愁。' ], currentIndex:1 }, 判断点击位置的函数： tabchange(e){ this.setData({ currentIndex:e.currentTarget.dataset.num }) }, （2）界面 先通过列表渲染展示导航条的数据，通过判断当前点击的位置来显示不同的样式，如果某一处被点击了，就用tab 和current样式，否则只用tab，这里用三目运算符来处理 下面的一个view通过列表渲染完成数据的显示 <view clsss="main"> <view class="header"> <block wx:for="{{t}}"> <view class="tab {{currentIndex==item.sub ? 'current':''}}" bindtap="tabchange" data-num="{{item.sub}}">{{item.name}}</view> </block> </view> </view> <view wx:for="{{arr}}" class="poetry"> {{item}} </view> （3）页面样式 .tab{ font-size: 32rpx ; color:#86C811 ; } .current{ color:#fff; background-color:#86C811; padding:6rpx 8rpx; } .main{ width:95%; background-color:■#fff; margin:40rpx auto; border-radius:6rpx 6rpx 0 0; font-size:28rpx; } .header{ width:100%; height:120rpx; background-color:#F6F6F6; display:flex; align-items:center; justify-content:space-around; font-size:32rpx; } .poetry{ font-size: 30rpx; background-color: #EDEFF0; } （4）测试结果
|
请发表评论