微信小程序（解密常用组件（1） 附组件案例）

其实我理解的小程序的组件，就类似于H5的新标签，微信把一些功能封装在标签里，我们使用不同的标签，就会实现不同的功能，小程序称这些为组件。

下面通过案例来讲解组件

一、轮播图---组件：swiper

8.jpg

轮播图小案例

//text.js
Page({
    data:{
        //是否显示面板指示点
        indicatorDots:true,
        //自动切换时间间隔
        interval:1000,
        //滑动动画时长
        duration:1000,
        imgs:[
            '/img/1.jpg',
            '/img/2.jpg',
            '/img/3.jpg',
            '/img/4.jpg',
        ]
    }
})

//text.wxss
image{
    width: 750rpx;
}

实现效果

GIF.gif

二、下拉加载---组件:scroll-view

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

相关属性如下：

02.jpg

下拉加载小案例

text.wxml文件中

text.js文件夹中

Page({
    lower:function(){
        console.log("看这里，看这里~lower")
    },
    upper:function(){
        console.log("看这里，看这里~upper")
    }
})

text,wxss中

.scroll{
    background-color: green;
    height: 300px;
}
.inner{
    height: 500px;
}

上栗表示，当滚动条距离顶部100px时，打印“看这里，看这里_{upper”，当滚动条距离底部100px时，打印“看这里，看这里}lower”

运行效果

GIF.gif

三、滚动条---组件：progress

03.jpg

滚动条案例
text.wxml

表示一个进度百分比为100的进度条，宽是20px，颜色为天蓝，active表示激活，并且在右侧显示备份比

效果如图所示

GIF.gif

四、滚动选择器---组件：picker-view

相关属性如下如所示

04.jpg

滚动选择器小案例

text.wxml

    {{selname}}-{{seladdr}}-{{selthing}}
    

        
            {{item}}
        

        
            {{item}}
        

        
            {{item}}
        
    

text.js

Page({
  data:{
    selname:'小明',
    seladdr:'在学校',
    selthing:'学习',
    value:[0,0,0],
    name:["小明","小红","小兰","小粉"],
    address:["在学校","在班级","在家","在饭店"],
    thing:["学习","吃饭","上厕所","看电视"]
  },
  change:function(e){
  //当滚动的时候，获取滚动的事件对象，获取事件对象的标准格式，获取的是一个数组
    var val = e.detail.value;
//this.setData是设置参数的标准格式
    this.setData({
      selname:this.data.name[val[0]],
      seladdr:this.data.address[val[1]],
      selthing:this.data.thing[val[2]]
    })
  },
})

text.css

.item1{
    height: 50px;
    line-height: 50px;
}

运行效果

GIF.gif

五、弹起的滚动器---组件：picker

从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。

051.jpg

052.jpg

053.jpg

text.wxml
滚动器小案例

    
        {{arrayObject[index]}}
    

text,js

Page({
    data:{
        index:0,
        arrayObject:["北京","武汉","深圳","上海"]
    },
    change:function(e){
        this.setData({
            index:e.detail.value
        })
    }
})

运行效果

GIF.gif