在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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)测试结果
|
请发表评论