微信小程序_常用组件

小程序基础组件

百分比

• show-info: 在进度条右侧显示百分比 默认false
• active 进度条动画boolean
• color: 进度条颜色
• stroke-width: 进度条宽度(px)

"10" color="red" percent="40" active show-info>progress>
复制代码

轮播图

• circular: 循环轮播《不会从头开始》 circular='{{true}}'
• indicator-dots： 指示器
• interval： 间隔时间
• autoplay： 自动轮播
• verrical: 向上轮播

'{{true}}' circular='{{true}}'  indicator-dots='{{true}}' autoplay='{{true}}' interval="2000" class="sw">
  
      
  
  
      
  
  
      
  
  
      
  

复制代码

picker

• bindchange: 滑动结束时触发
• mode 类型
• start end: 显示可选择时间范围
• value: 选中值

   你选择的时间{{date}} 

 

 你选择的日期{{date}} 



  你的选择是{{val}}




    
        {{item}}
    
     
         {{item}}
          

 你选择 : {{str}} 
 
 data:{
    date:"14:00",
    time:'2016-12-01',
    array:["吃","喝","玩"],
    val:'',
    foods:['面包','馒头','米饭'],
    drinks:['可乐','水']
  },
  timeEvnt(e){
    this.setData({
      time:e.detail.value
    })
  },
  selector(e){
    this.setData({
      val:this.data.array[e.detail.value]
    })
     
  },
  picks(e){
      console.log(e.detail.value)
  },
复制代码

animation

    class="box" animation="{{animate}}">view>
    
   // 页面初始化 options 为页面跳转所带来的参数
    var animate = wx.createAnimation({
      // 动画持续时间.ms
      duration: 2000,
      // 定义动画效果
      timingFunction: 'linear',
      // 动画延迟时间 ms
      delay: 0,
      // 中心点
      transformOrigin: '50% 50% 0'
    })
    /*
      skew: 倾斜
      roate: 旋转
      scale: 缩放
      translate: 偏移
    */
    animate.skew(40).rotate(60).step();
    animate.translate(200, 200).step();
    this.setData({
      animate
    })
复制代码

滚动组件

• scroll-x Boolean false 允许横向滚动
• scroll-y Boolean false 允许纵向滚动
• upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
• lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
• scroll-top Number 设置竖向滚动条位置
• scroll-left Number 设置横向滚动条位置
• scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
• scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
• enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
• bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
• bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
• bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

  
    
      
        {{item.title}} 
            
      
      
        {{item.hand}}
        {{item.describlxiao'cjheng'xue}}
      
    
  

复制代码