微信小程序_02

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文件

var app = getApp();
Page({
  data:{
    indicatordos:true,
    autoplay:true,
/*图片数组*/
    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);//输出来当前swiper-item的index
   },

  changeautodisplay:function(){
    this.setData({
      autoplay:!this.data.autoplay//设置是否自动播放
  })
  },
  changeindicator:function(){
    this.setData({
  indicatordos:!this.data.indicatordos//隐藏图片那个点
})
  },
  changevertical:function(){
    this.setData({//设置水平方向
      vertical:!this.data.vertical
    })
  }

})

swiper.xml文件


    
        
        
            
                
            
        
        
    
    
        
        
        
//这里边用了一个简单的判断语句 :{{autoplay?"YES":"NO"
    

效果如下:

微信小程序_02_第1张图片
2016-11-07 17_27_56.gif

2.checkbox的使用

其实就是复选框:

微信小程序_02_第2张图片
E935B5E6-0FC3-4A00-813C-9A259C2582AE.png

下边用了text显示了当前选中的name。
js文件

首先要设置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文件


    
         //绑定事件
            
        
    

    
    {{text}}//显示选中的数据的name
    

css文件

.bd{
    width: 800rpx;
    height: 500rpx;
    margin-left: 50rpx;
}
.checkbox{
   display: block;//这个要一定写的 暂时没搞懂意思  应该是一种布局方式。
   margin: 20;
}
.checklabel{
    width: 500rpx;
    height: 200rpx;
}
.checkfooter{
    margin-left: 50rpx;
}

效果如下:

微信小程序_02_第3张图片
2016-11-07 17_13_36.gif

很多代码的地方都写了注释,有什么不懂或者疑问,欢迎来吐槽!
demo地址
微信小程序_01

你可能感兴趣的:(微信小程序_02)