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

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

下面通过案例来讲解组件

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

8.jpg
轮播图小案例

<!--text.wxml-->
<view class="page">
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{true}}" interval="{{interval}}" duration="{{duration}}" circular="true">

        <block wx:for="{{imgs}}">
            <swiper-item>
                <image src="{{item}}"/>      
            </swiper-item>
        </block>

    </swiper>
</view>

//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

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

相关属性如下：

02.jpg
下拉加载小案例

text.wxml文件中

<view class="page">
    <scroll-view scroll-y="{{true}}" class="scroll" scroll-top="100" bindscrolltolower="lower" bindscrolltoupper="upper">
        <view class="inner"></view>
    </scroll-view>
</view>

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

<view class="page">
    <progress percent="100" active show-info stroke-width="20" color="skyblue" />
</view>

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

效果如图所示

GIF.gif

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

相关属性如下如所示

04.jpg
滚动选择器小案例

text.wxml

<view class="page center">
    <view>{{selname}}-{{seladdr}}-{{selthing}}</view>
    <picker-view value="{{value}}" bindchange="change" indicator-style="height:50px" style="width:100%;height:300px" >

        <picker-view-column>
            <view wx:for="{{name}}" class="item1">{{item}}</view>
        </picker-view-column>

        <picker-view-column>
            <view wx:for="{{address}}" class="item1">{{item}}</view>
        </picker-view-column>

        <picker-view-column>
            <view wx:for="{{thing}}" class="item1">{{item}}</view>
        </picker-view-column>
    </picker-view>
</view>

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
滚动器小案例

<view class="page center">
    <picker bindchange="change" value="{{index}}" range="{{arrayObject}}">
        <view class="picker">{{arrayObject[index]}}</view>
    </picker>
</view>

text,js

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

运行效果

GIF.gif