1.swiper的使用
这个类似iOS的滚动视图,里边也可以放一下其他的东西。
先讲一下属性:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | Boolean | false | 是否显示面板指示点 |
autoplay | Boolean | false | 是否自动切换 |
current | Number | 0 | 当前所在页面的 index |
interval | Number | 5000 | 自动切换时间间隔 |
duration | Number | 1000 | 滑动动画时长 |
bindchange | EventHandle | current 改变时会触发 change 事件,event.detail = {current: current} |
swiper.js文件
1 | var app = getApp(); |
swiper.xml文件
1 | <view class="container"> |
效果如下:
2.checkbox的使用
其实就是复选框:
下边用了text显示了当前选中的name。
js文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50首先要设置data的list
Page({
data:{
items: [
{name: 'USA', value: '美国'},
{name: 'CHN', value: '中国', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英国'},
{name: 'TUR', value: '法国'},
],
text:'',//用来显示选中的box
},
onShow:function(){
// 页面显示 第一次进入页面统计选中的box 调用函数。
this.check();
},
change:function(e){
console.log(e.detail.value);
var te="暂时没选中";
if(e.detail.value.length == 0)
{
} else {
te = e.detail.value;
}
this.setData({
text:te
})
},
********遍历是否有选中的***********
check:function(){
var te="";//遍历是否有选中的
for(var i = 0;i < this.data.items.length;i ++){
var item = this.data.items[i];
if(item.checked){ //如果选中 加到字符串中
te += item.value;
}
}
if(te.length == 0)
{
te = "暂时没选中" ;
}
this.setData({
text:te
})
}
})
xml文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<view class = "contain">
<view class="bd">
<checkbox-group bindchange="change"> //绑定事件
<label class="checkbox" wx:for="{{items}}">//循环绑定到item
<checkbox value="{{item.value}}" checked="{{item.checked}}"
>
{{item.value}}
</checkbox>
</label>
</checkbox-group>
</view>
<view class="checkfooter">
<text >{{text}}</text>//显示选中的数据的name
</view>
</view>
css文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16.bd{
width: 800rpx;
height: 500rpx;
margin-left: 50rpx;
}
.checkbox{
display: block;//这个要一定写的 暂时没搞懂意思 应该是一种布局方式。
margin: 20;
}
.checklabel{
width: 500rpx;
height: 200rpx;
}
.checkfooter{
margin-left: 50rpx;
}
效果如下:
很多代码的地方都写了注释,有什么不懂或者疑问,欢迎来吐槽!
demo地址
微信小程序_01