用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

范小饭:微信小程序常用组件详解(1) 附组件案例

纸飞机 2018-3-8 09:38

其实我理解的的组件,就类似于H5的新标签,微信把一些功能封装在标签里,我们使用不同的标签,就会实现不同的功能,小程序称这些为组件。下面通过案例来讲解组件一、轮播图---组件:swiper轮播图小案例 ...

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

下面通过案例来讲解组件

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


轮播图小案例


<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;
}

实现效果

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

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

相关属性如下:


下拉加载小案例

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”

运行效果

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

滚动条案例
text.wxml

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

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

效果如图所示

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

相关属性如下如所示


滚动选择器小案例

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;
}

运行效果

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

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


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
        })
    }
})

运行效果

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏