用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

范小饭:微信小程序常用组件详解(2) switch,icon,navigator,audio,video ... ...

纸飞机 2018-3-8 09:37

一、开关选择器---switch开关选择器小案例text.wxml 声音 震动 text.jsPage({ change:function(e){ console.log(e.detail.value) //被选上的时候值为true ...

一、开关选择器---switch



开关选择器小案例
text.wxml

<view class="page">
    <view class="item">
        声音type="switch" checked bindchange="change" />
    view>
    <view class="item">
        震动type="switch" bindchange="change" />
    view>
view>

text.js

Page({
    change:function(e){
        console.log(e.detail.value)
        //被选上的时候值为true
        //没有被选上的时候值为false
        //通过这个我们可以对其进行操作
    }
})

text.wxss

.item{
    background-color: #dfdfdf;
    padding: 10px;
    line-height: 30px;
    border: 1px solid white;
}
switch{
    float: right
}

运行效果


二、图标---组件:icon

微信提供了很多默认的图标,可以自行选择,那么列举一下、


图标案例
text.wxml

<view class="page">
    <view>{{title}}view>
    <view wx:for="{{icons}}" class="center">
      {{item.type}}  <icon type="{{item.type}}" size="{{item.size}}">icon>
    view>

    <button>
        <icon type="download">icon>下载    
    
                
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏