1.swiper的使用

這個類似iOS的滾動視圖被碗，里邊也可以放一下其他的東西咪奖。
先講一下屬性：

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è)置是否自動播放
  })
  },
  changeindicator:function(){
    this.setData({
  indicatordos:!this.data.indicatordos//隱藏圖片那個點
})
  },
  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>
//這里邊用了一個簡單的判斷語句 :{{autoplay?"YES":"NO"
    </view>
</view>

效果如下:

2016-11-07 17_27_56.gif

2.checkbox的使用

其實就是復(fù)選框：

E935B5E6-0FC3-4A00-813C-9A259C2582AE.png

首先要設(shè)置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(){
    // 頁面顯示 第一次進入頁面統(tǒng)計選中的box 調(diào)用函數(shù)羹铅。
    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文件

<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;//這個要一定寫的 暫時沒搞懂意思  應(yīng)該是一種布局方式香缺。
   margin: 20;
}
.checklabel{
    width: 500rpx;
    height: 200rpx;
}
.checkfooter{
    margin-left: 50rpx;
}

效果如下：

2016-11-07 17_13_36.gif

很多代碼的地方都寫了注釋奥额，有什么不懂或者疑問苫幢，歡迎來吐槽！
demo地址
微信小程序_01