1.swiper的使用
這個(gè)類似iOS的滾動(dòng)視圖，里邊也可以放一下其他的東西。
先講一下屬性：
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) |
| autoplay | Boolean | false | 是否自動(dòng)切換 |
| current | Number | 0 | 當(dāng)前所在頁面的 index |
| interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 |
| duration | Number | 1000 | 滑動(dòng)動(dòng)畫時(shí)長(zhǎng) |
| bindchange | EventHandle | current 改變時(shí)會(huì)觸發(fā) change 事件，event.detail = {current: current} |
swiper.js文件
var app = getApp();
Page({
data:{
indicatordos:true,
autoplay:true,
/*圖片數(shù)組*/
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
'http://imgsrc.baidu.com/forum/pic/item/1080fc8b87d6277f026c80b428381f30e824fc46.jpg',
'http://imgsrc.baidu.com/forum/pic/item/2eadcbef76094b366ac0bf0da3cc7cd98c109d84.jpg',
'http://img1.tgbusdata.cn/v2/thumb/jpg/MGNlNiw3MzAsNzMwLDQsMSwxLC0xLDAscms1MA==/u/olpic.tgbusdata.cn/uploads/allimg/130124/62-130124160054.jpg'
],
vertical:true,
},
displaychange:function(event){
console.log(event.detail.current);//輸出來當(dāng)前swiper-item的index
},
changeautodisplay:function(){
this.setData({
autoplay:!this.data.autoplay//設(shè)置是否自動(dòng)播放
})
},
changeindicator:function(){
this.setData({
indicatordos:!this.data.indicatordos//隱藏圖片那個(gè)點(diǎn)
})
},
changevertical:function(){
this.setData({//設(shè)置水平方向
vertical:!this.data.vertical
})
}
})
swiper.xml文件
<view class="container">
<view class="swiperview">
<swiper class="swiperitem" indicator-dots="{{indicatordos}}" autoplay="{{autoplay}}"
bindchange="displaychange" duration="1000" interval="2000"
vertical="{{vertical}}"
>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>
<view vlass="bottomview">
<button type="default" bindtap="changeautodisplay" class="bottomButton">autodisplay:{{autoplay?"YES":"NO"}}</button>
<button type="default" bindtap="changeindicator" class="bottomButton">indicatordots:{{autoplay?"YES":"NO"}}</button>
<button type="default" bindtap="changevertical" class="bottomButton">水平:{{autoplay?"YES":"NO"}}</button>
//這里邊用了一個(gè)簡(jiǎn)單的判斷語句 :{{autoplay?"YES":"NO"
</view>
</view>
效果如下:
2016-11-07 17_27_56.gif
2.checkbox的使用
其實(shí)就是復(fù)選框：
E935B5E6-0FC3-4A00-813C-9A259C2582AE.png
下邊用了text顯示了當(dāng)前選中的name。
js文件
首先要設(shè)置data的list
Page({
data:{
items: [
{name: 'USA', value: '美國(guó)'},
{name: 'CHN', value: '中國(guó)', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國(guó)'},
{name: 'TUR', value: '法國(guó)'},
],
text:'',//用來顯示選中的box
},
onShow:function(){
// 頁面顯示 第一次進(jìn)入頁面統(tǒng)計(jì)選中的box 調(diào)用函數(shù)。
this.check();
},
change:function(e){
console.log(e.detail.value);
var te="暫時(shí)沒選中";
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 = "暫時(shí)沒選中" ;
}
this.setData({
text:te
})
}
})
xml文件
<view class = "contain">
<view class="bd">
<checkbox-group bindchange="change"> //綁定事件
<label class="checkbox" wx:for="{{items}}">//循環(huán)綁定到item
<checkbox value="{{item.value}}" checked="{{item.checked}}"
>
{{item.value}}
</checkbox>
</label>
</checkbox-group>
</view>
<view class="checkfooter">
<text >{{text}}</text>//顯示選中的數(shù)據(jù)的name
</view>
</view>
css文件
.bd{
width: 800rpx;
height: 500rpx;
margin-left: 50rpx;
}
.checkbox{
display: block;//這個(gè)要一定寫的 暫時(shí)沒搞懂意思 應(yīng)該是一種布局方式。
margin: 20;
}
.checklabel{
width: 500rpx;
height: 200rpx;
}
.checkfooter{
margin-left: 50rpx;
}
效果如下：
2016-11-07 17_13_36.gif
