精华内容
下载资源
问答
  • 主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • 基于wepy开发的微信小程序loading加载动画组件
  • 微信小程序 - 自定义组件 预览 用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用 组件的wxml结构请看src/components/下的组件 样式文件可直接引用src/components/wux.wxss Components ...
  • 微信小程序 wepyjs 第三方toast组件 说明 官方toast组件只支持显示success,loading两种icon,因此需要一个更加个性化的toast组件。 此组件依赖于wepyjs v1.1.9 ,如果没有使用wepyjs,则可以使用原版toast组件。 ...
  • 微信小程序自定义组件---loading组件

    千次阅读 2020-01-03 15:11:56
    在开发微信小程序的过程中,经常会使用到loading动画,微信自带的wx.showLoading()与wx.showToast()在使用上非常的方便,但是这个接口也是一个坑,在安卓真机上运行,经常会出现wx.hideLoading()无效的情况,结果就...

    在开发微信小程序的过程中,经常会使用到loading动画,微信自带的wx.showLoading()与wx.showToast()在使用上非常的方便,但是这个接口也是一个坑,在安卓真机上运行,经常会出现wx.hideLoading()无效的情况,结果就导致loading动画一直存在,看到微信官方说的是不在onShow和onLoad中调用,还有就是加个延时setTimeout,然而这两个我都试过了,还是无效,也就是说这个微信官方的bug目前还没有什么有效的解决方法,到这里就决定了,果断弃坑。

    自己写一个loading组件不香嘛?

    下面是实现过程,仅做参考,不足之处还望指出:

    wxml文件:

    <view class="loading-container"  catchtouchmove="true" hidden="{{!loadingState}}">
      <view class="loading-mask" wx:if="{{maskState}}"></view>
      <view class="loading-main">
        <view class="loading-content">
          <view class="loading-image">
            <image src="../../images/loading.png"></image>
          </view>
          <view class="loading-text">
            {{loadingText}}
          </view>
        </view>
      </view>
    </view>

    js文件:

    // components/rwj-loading/index.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        loadingState: false,
        maskState: false,
        loadingText: "加载中..."
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        show({ mask = false, title = "加载中..." } = {}){
          this.setData({
            loadingState: true,
            maskState: mask,
            loadingText: title
          })
        },
        hide(){
          this.setData({
            loadingState: false
          })
        }
      }
    })
    

    wxss文件:

    /* components/rwj-loading/index.wxss */
    view,page,text{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .loading-container{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999999;
    }
    .loading-container .loading-mask{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
      background-color: rgba(0,0,0,0.5);
    }
    .loading-container .loading-main{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 99;
    }
    .loading-container .loading-main .loading-content{
      width: 250rpx;
      height: 250rpx;
      border-radius: 20rpx;
      background-color: rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .loading-container .loading-main .loading-content .loading-image{
      width: 150rpx;
      height: 150rpx;
      padding: 40rpx;
      margin-top: 10rpx;
    }
    .loading-container .loading-main .loading-content .loading-image image{
      width: 100%;
      height: 100%;
      animation: loading 1s linear infinite;
    }
    @keyframes loading{
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
    }
    .loading-container .loading-main .loading-content .loading-text{
      width: 100%;
      padding: 0rpx 20rpx;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
    }

    使用方法如下:

    wxml中插入组件:
    <rwj-loading  id="loading"></rwj-loading>
    
    js调用:
    this.selectComponent("#loading").show();
    this.selectComponent("#loading").hide();

    补充:建议在app.json中全局引入。

    优化:我想像wx.showLoading()那样直接写js控制显示隐藏,使用组件的话还需要插入到wxml才能使用,在使用便捷方面感觉还是不如微信官方的接口的,希望哪位大神可以提供一下思路。

    展开全文
  • 直接解压到自己的项目中即可,需要注意图片路径,在页面中使用this.selectComponent("#loading").show(); this.selectComponent("#loading").hide(); 控制显示隐藏
  • 微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input...
  • 本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default、mini—-default为块级按钮、mini为小按钮 type:primary、default、warn—-primary...
  • 由于我的是截图,有需要的话,可能需要...上面的wxss样式需要找个可以全局使用的文件放起来,然后再组件的wxss中引入: js:Component({})这个应该是必须的,要不然可能会报错或者不显示(我没测试) json: ...

    由于我的是截图,有需要的话,可能需要手敲,怕出错的同学可以去这里,这是我参考的文档:http://www.demodashi.com/demo/14242.html

    先创建文件

    wxml:

    wxss:

    上面的wxss样式需要找个可以全局使用的文件放起来,然后再组件的wxss中引入:

    js:Component({})这个应该是必须的,要不然可能会报错或者不显示(我没测试)

    json:

    展开全文
  • MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多功能组件,其中 ...

    MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架、各种小程序组件主流框架等,并且提供了高效的命令行工具。MinUI 组件库包含了很多功能组件,其中 loading 加载提示组件是一个很常用的功能性组件, MinUI 中 loading 组件的效果图如下:

    是不是看起来很方便很快捷的样子(^_^)。可以打开微信扫一扫下面的小程序二维码先一睹为快:

    下面介绍 loading 组件的使用方式。

    1、使用下列命令安装 Min-Cli,如已安装,请进入到下一步。Min-Cli 的文档请猛戳这里:Min-Cli使用手册

    npm install -g @mindev/min-cli
    复制代码

    2、初始化一个小程序项目。

    min init my-project
    复制代码

    选择 新建小程序 选项,即可初始化一个小程序项目。创建项目后,在编辑器中打开项目,src 目录为源码目录,dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档:Min 初始化小程序项目

    3、安装 loading 组件。

    进入刚才新建的小程序项目的目录中:

    cd my-project
    复制代码

    安装组件:

    min install @minui/wxc-loading
    复制代码

    4、开启dev。

    min dev
    复制代码

    开启之后,修改源码后都会重新编译。

    5、在页面中引入组件。

    在编辑器中打开 src/pages 目录下的 home/index.wxp 文件,在 script 中添加 config 字段,配置小程序自定义组件字段,代码如下:

    export default {
        config: {
            "usingComponents": {
                'wxc-loading': "@minui/wxc-loading"
            }
        }
    }
    复制代码

    wxc-loading 即为加载提示组件的标签名,可以在 wxml 中使用。

    6、在 wxml 中使用 wxc-loading标签。

    home/index.wxp 文件的 template 中添加 wxc-loading 标签,代码如下:

    <wxc-loading
        is-show="{{$loading.isShow}}"
        type="mall"
      ></wxc-loading>
    复制代码

    home/index.wxp 文件的代码如下所示:

    <!-- home/index.wxp -->
    <template>
      <wxc-loading
        is-show="{{$loading.isShow}}"
        type="mall"
      ></wxc-loading>
      <button bindtap="showLoading">设置 type</button>
    </template>
    
    <script>
    export default {
      config: {
        usingComponents: {
          'wxc-loading': '@minui/wxc-loading'
        }
      },
      data: {
        $loading: {
          isShow: false
        }
      },
      showLoading() {
          this.setData({
            $loading: {
              isShow: true
            }
          })
          setTimeout(() => {
            this.setData({
              $loading: {
                isShow: false
              }
            })
          }, 1000)
        }
    }
    </script>
    
    <style>
    </style>
    复制代码

    7、打开微信开发者工具,指定 dist 目录,预览项目。

    图示:

    至此,minui 组件库的 loading 加载提示组件在 Min 工具生成的小程序项目中的方法已介绍完毕,其他场景,在原生小程序或其他小程序框架项目中的使用方式请移步至如下链接:

    在已有小程序项目中使用 MinUI 组件介绍

    了解组件的使用方式后,下面开始介绍 loading 组件的 API 。

    Loading【props】

    名称描述
    is-show[说明]:loading的显示控制属性。
    [类型]:String
    [默认值]:false
    type[说明]:样式类型。type的优先级低于 image, slip
    [类型]:String
    [默认值]:"mgj"
    [可选值]:
    mgj(蘑菇街女装精选 loading 样式),
    mall(企鹅微商城 loading 样式)
    image[说明]:loading主背景图, 必须与slip同时指定。
    [类型]:String
    [默认值]:""
    slip[说明]:loading动画背景图,必须与image同时指定。
    [类型]:String
    [默认值]:""

    Loading【methods】

    名称描述
    show[说明]:显示loading。
    [类型]:Function
    [参数]:void
    [返回]:void
    hide[说明]:隐藏loading。
    [类型]:Function
    [参数]:void
    [返回]:void

    更多demo

    1、自定义数据

    <template>
      <wxc-loading
        is-show="{{$loading.isShow}}"
        image="https://s10.mogucdn.com/mlcdn/c45406/170607_5241335cb37ka3ab7781ddh504ggh_200x200.png"
        slip="http://s10.mogucdn.com/p1/160715/upload_ifrgmmzwmyydknldhezdambqmeyde_200x200.png"
      ></wxc-loading>
      <button bindtap="showLoading">自定义图片</button>
    </template>
    
    <script>
      export default {
        config: {
          usingComponents: {
            'wxc-loading': '@minui/wxc-loading'
          }
        },
        data: {
          $loading: {
            isShow: false
          }
        },
        showLoading() {
            this.setData({
              $loading: {
                isShow: true
              }
            })
            setTimeout(() => {
              this.setData({
              $loading: {
                isShow: false
              }
            })
          }, 1000)
        }
      }
    </script>
    
    <style>
    </style>
    复制代码

    图示:

    **2、调用组件方法 **

    <template>
        <wxc-loading
            class="J_loading"
            type="mall"
        ></wxc-loading>
        <button bindtap="showLoading">调用 show() 方法</button>
    </template>
    
    <script>
      export default {
        config: {
          usingComponents: {
            'wxc-loading': '@minui/wxc-loading'
          }
        },
        data: {},
        showLoading() {
            let $loading = this.selectComponent('.J_loading')
            $loading && $loading.show()
    
            setTimeout(() => {
              $loading && $loading.hide()
            }, 2000)
         }
      }
    </script>
    
    <style>
    </style>
    
    复制代码

    图示:

    更多组件更新同步请关注 MinUI 小程序组件库示例查看,或请移步到实时同步更新的 微信小程序 loading 加载提示组件使用文档

    沟通反馈

    请添加群助手 wUf18018252882 好友或者扫码加好友,并与群助手对话发送验证码 10088 按照指引进群。

    相关链接

    展开全文
  • Loading - 指示器 Notification - 通知 Picker - 选择器 Prompt - 提示信息 Qrcode - 二维码 Rater - 评分组件 Refresher - 下拉刷新 Toast - 提示框 Toptips - 顶部提示 Vcode - 验证码 X...
  • 微信小程序基础组件

    2021-01-13 21:27:00
    微信小程序组件常见组件view容器text文本image图片[swiper轮播图 ](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html) 官方文档: 组件 官网的组件很多,为了方便学习整理了常用的几个组件 ...

    官网的组件很多,为了方便学习整理了常用的几个组件

    常见组件

    view、text、rich-text、button、image、navigator、icon、swiper、radio、checkbox等

    view容器

    用来代替 html 中的 div 标签
    属性:

    属性功能
    hover-class手指点击的动态样式
    hover-stop-propagation是否阻止父节点冒泡
    hover-start-time手指按住多少时间出现响应
    hover-stay-time手指离开多久出现响应

    多用来处理样式细节

    text文本

    1. 文本标签
    2. 只能嵌套text , 在text里面只能嵌套text自己
    3. 长安文字可以复制(只有text组件有这个功能)
    4. 可以对空格、大于号、小于号、 回车等 进行 编码 。decode可以解析的有   < > & '    
    属性名类型默认值说明
    selectableBooleanfalse⽂本是否可选
    decodeBooleanfalse是否解码

    属性:

    1. 长按文字复制: selectable
    2. 对文本内容进行解码 : decode
    <text selectable>text</text>
    <view>---</view>
    
    <text decode>带有解码 &nbsp;</text>
    <view>---</view>
    
    <text >没有解码 &nbsp;</text>
    

    效果:
    在这里插入图片描述

    image图片

    小程序在后期打包上线有大小要求,腾讯规定程序打包上线的大小不能超过2M,所以很多静态资源要放到网络上
    一张图片的大小就要几M,所以建议要使用图片的时候统一使用外网的图片
    图片标签存在默认宽高,默认宽度320px,高度240px

    1. 图片统一使用外网图片
    2. image组件默认宽度320px,高度240px
    3. 支持懒加载

    先准备一个网络图片,这里推荐使用薄荷图床
    薄荷图床

    在src属性中填写链接

    <image src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
    

    设置wxss样式
    设置mode属性

    属性作用
    scaleToFill不保持纵横比,使图片完全填满image组件空间
    aspectFit保持纵横比,完全显示图片长边
    aspectFilt保持纵横比,完全显示图片短边
    widthFix保持纵横比,指定宽度,高度自适应
    <!-- mode属性 -->
    <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
    

    懒加载
    小程序的图片组件 直接支持懒加载
    要使用懒加载的时候,加上属性lazy-load就可以

    懒加载判断机制:当图片出现在屏幕中的上下 三屏的高度之内的时候, 程序就会自己加载图片
    懒加载的原理及实现

    <!-- 懒加载 -->
    <image lazy-load="" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
    

    swiper轮播图

    swiper是微信内置的轮播图组件
    怕不能单独使用,要搭配swiper-item 来使用

    1. 轮播图的外层容器 swiper
    2. 每一个轮播项 swiper-item
    3. swiper标签存在默认样式
      1. width : 100%
      2. height : 150px
      3. image图片本身也存在默认宽高 320 \ 240
      4. swiper的高度无法由内容撑开
    4. 手动算一下swiper的高度,先找出来原图的高度个宽度,然后等比例的给 swiper计算 宽度和高度
      比如: 原图的 宽度和高度 1125 * 352 px
      swiper 宽度 / swiper 高度 = 原图 宽度 / 原图 高度
      750rpx / swiper 高度 = 1125 / 352
      height : 750rpx * 352 / 1125

    wxml

    <swiper>
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
    </swiper>
    

    wxss

    swiper{
      width: 100%;
      /* height: calc(750rpx * 352 / 1125); */
      height: 31.28vw;
    }
    
    image{
      width: 100%;
    }
    

    按照以上步骤, 能实现轮播图大小随着不同屏幕窗口的大小而改变

    轮播图属性

    1. autoplay 自动轮播 默认true
    2. interval 自动轮播的时间间隔
    3. circular 是否衔接轮播 默认true
    4. indicator-dots 是否开启轮播按钮
    5. indicator-color 轮播按钮未被选中颜色
    6. indicator-active-color 轮播按钮被选中的颜色
    <swiper autoplay interval="1000" circular indicator-dots indicator-color="red" indicator-active-color="#0094ff">   
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://riyugo.com/i/2021/01/13/ifa782.jpeg"></image>
      </swiper-item>
    </swiper>
    

    效果图
    在这里插入图片描述

    navigator导航

    导航组件 类似超链接标签

    属性名默认值功能
    targetself在哪个目标发生跳转
    url跳转链接
    open-typenavigate跳转方式

    导航组件

    1. 导航组件navigator 是块级元素, 默认会换行 , 可以直接加宽度和高度
    2. url 要跳转的页面路径 绝对路径/相对路径 都可以
    3. target 要跳转道当前的小程序,还是其他的小程序页面
      self 默认值 自己的小程序页面
      miniProgram 其他的小程序页面
    4. open-type 跳转的方式
      1. navigate 默认值 左上角有返回按钮 保留当前页面,跳转到程序内的某个页面,但是不能跳转到tabbar页面
      2. redirect 左上角没有返回按钮,有回到首页按钮, 关闭当前页面,跳转到程序内的某个页面,但是不能跳转到tabbar页面
      3. switchTab 跳转到tabBar页面 , 并关闭其他所有非tabBar页面
      4. reLaunch 关闭所有⻚⾯,打开到应⽤内的某个⻚⾯
     <navigator url="/pages/demo5/demo5">轮播图页面</navigator>
     <navigator open-type="reLaunch" url="/pages/index/index">轮播图页面</navigator>
    

    rich-text富文本

    rich-text : 富文本标签
    可以将字符串解析成对应标签,类似vue中 v-html 功能

    1. nodes 功能

      1. 接收标签字符串
      2. 接收对象数组
    2. nodes 属性

      1. name 标签名
      2. attrs 标签属 性
      3. children 子节点列表
      4. text 文本

    看下方源码,使用对象数组实现标签比较麻烦,所以一般使用标签字符串比较多

    wxml

    <!-- 接收标签字符串 -->
    <rich-text nodes="{{html}}"></rich-text> 
    
    <!-- 接收对象数组 -->
    <rich-text nodes="{{html1}}"></rich-text
    

    js

    // pages/demo7/demo7.js
    Page({
      data: {
        //标签字符串
        html:'<div class="header-bd"><a class="placeholder"><span class="text iconfont icon-search">寻找宝贝店铺</span></a></div>',
      
        //对象数组
        html1:[
          {
            //设置标签 div
            name:"div",
            //设置 div 的标签属性
            attrs:{
              class:"my_div",
              style:"color:red;"
            },
            //为 div 标签设置子节点 p
            children:[
              {
                //子节点 p 标签
                name:"p",
                //p 标签的属性
                attrs:{},
                //为 p 设置 子节点 text
                children:[
                  {
                    type:"text",
                    text:"hello"
                  }
                ]
              }
            ]
          }
        ]
      }
    })
    

    可以去官方文档查看支持的标签
    在这里插入图片描述

    button按钮

    样式属性
    在这里插入图片描述

    button属性

    1. size 按钮大小
      default 默认值
      mini ⼩尺⼨
    2. type 按钮内文字样式
      default 灰色
      primary 绿色
      warn 红色
    3. plain 按钮是否镂空,完全透明透明
    4. disabled 是否禁⽤
    5. loading 在前面有个加载状态的圈圈
    <button>默认按钮</button>
    <button size="mini">mini 小尺寸按钮</button>
    <button type="primary">绿色样式</button>
    <button type="warn">红色</button>
    <button type="warn" plain>镂空</button>
    <button type="warn" loading>加载</button>
    

    效果图
    在这里插入图片描述
    open-type 的值

    1. contact 打开客服会话功能,需要在小程序后台配置
      如果⽤⼾在会话中点击消息卡⽚后返回⼩程序,
      可以从 bindcontact 回调中获得具体信息
    2. share 转发当前小程序给 微信朋友
    3. getPhoneNumber 获取⽤⼾⼿机号
      1. 绑定一个事件 bindgetphonenumber
      2. 在事件的回调函数中 通过参数获取信息
      3. 获取到的信息是加密过得信息
        需要用户自己搭建的小程序服务后台, 在后台服务器中进行解析 获取手 机号码
    4. getUserInfo 获取当前用户的个人信息
      1. 绑定一个事件 bindgetuserinfo
      2. 在事件的回调函数中 通过参数获取信息
      3. 可以直接读取, 不存在加密字段
    5. launchApp 在小程序当中 直接打开app
      1. 需要先在 app 中 通过app的某个链接 打开小程序
      2. 然后在小程序中 再通过这个功能 重新打开app 类似 拼多多砍价
        可以通过app-parameter属性设定向APP传的参数
    6. openSetting 打开小程序 内置的授权页面
      1.授权页面中只会出现 用户曾经点击过得 权限
    7. feedback 打开小程序内置的 意见反馈页面
      ⽤⼾可提交反馈内容并上传⽇志,开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

    wxml

    <button open-type="contact">contact 客服会话</button>
    <button open-type="share">share 转发</button>
    <!-- 绑定事件 bindgetphonenumber -->
    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber 获取手机号</button>
    <!-- 绑定事件 bindgetuserinfo-->
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo 获取用户信息</button>
    <button open-type="launchApp">launchApp 打开app</button>
    <button open-type="openSetting">openSetting 打开授权页</button>
    <button open-type="feedback">feedback 意见反馈</button>
    

    js

    Page({
      //获取用户手机号码信息
      getPhoneNumber(e){
        console.log(e);
      },
      //获取用户个人信息
      getUserInfo(e){
        console.log(e);
      }
    })
    

    contact 联系客服功能实现

    1. 将小程序的测试号改为自己的appid
    2. 登录微信公众平台, 添加客服
    3. 客服消息使用指南

    在这里插入图片描述

    icon字体图标

    icon 字体图标组件
    组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

    在这里插入图片描述

    在这里插入图片描述
    属性

    1. type 类型
      取值: success, success_no_circle, info, warn, waiting, cancel,download, search, clear
    2. size 大小
    3. color 颜色
    <icon type="success" size="23" color="red"></icon>
    

    radio单选框

    Radio单选框

    1. 同一组 radio 标签 必须和 父元素 radio-group 一起使用
    2. value 选中的单选框的值
    3. 需要给radio-group标签绑定change事件
    4. 需要显示选中的值
    5. 为radio 标签加上 color 属性 改变颜色

    wxml

    <radio-group bindchange="habdleChange">
      <radio color="red" value="male"></radio>
      <radio  value="female"></radio>
    </radio-group>
    
    <view>您选中的是: {{gender}}</view>
    

    js

    Page({
      data: {
        gender:""
      },
      habdleChange(e){
        console.log(e);
        //获取单选框的值
        let gender = e.detail.value;
        //把值 赋给 data 中的数据
        this.setData({
          gender:gender
        })
      }
    })
    

    效果图:
    在这里插入图片描述

    checkbox复选框

    checkbox

    1. 同一组 checkbox 需要搭配 checkbox-group 来一起使用
    2. 在设置 data数值 , wx:for循环输出data , 设置key 和 value
    3. 绑定事件函数 , 获取选中的复选框的 value 值,
    4. 新建data对象, 赋值给新data对象
    5. 显示出选中的 value值
    6. value : 复选框的值
    7. disabled : 是否禁用
    8. checked : 是否默认选中
    9. color : 复选框的 √ 的颜色

    wxml

    <view>
      <checkbox-group bindchange="handleItemChange">
        <!-- 循环输出data -->
        <checkbox color="red" checked="true" wx:for="{{list}}" wx:key="id" value="{{item.value}}">
        {{item.name}}
        </checkbox>
      </checkbox-group>
    </view>
    
    <view>
      选中的水果: {{checkedList}}
    </view>
    

    js

    Page({
      data: {
        list:[
          {
          id:0,
          name:"苹果",
          value:"Apple"
        },
        {
          id:1,
          name:"葡萄",
          value:"grape"
        },
        {
          id:2,
          name:"香蕉",
          value:"bananer"
        }
      ],
      checkedList:[]
      },
      //复选框的选中时间
      handleItemChange(e){
        console.log(e);
        //获取被选中的复选框的值
        const checkedList = e.detail.value;
        //进行赋值
        this.setData({
          checkedList
        })
      }
    })
    

    效果图:
    在这里插入图片描述

    展开全文
  • Window text组件 switch组件 tabBar底部导航 progress组件 action-sheet 应用生命周期 button组件 modal组件 页面生命周期 checkbox组件 toast组件 模块化详 form组件详 loading 组件 数据绑定 input ...
  • 微信小程序 常用组件

    2020-05-21 18:30:28
    微信小程序组件的官网地址: https://developers.weixin.qq.com/miniprogram/dev/component/ 一、View 二、text 三、image 四、button 五、swiper 六、navigator 七、rich-text 八、ircon 九、radio 十、checkbox
  • 这篇文章主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下本文实例讲述了微信小程序...
  • 微信小程序--Loading组件

    千次阅读 2017-08-09 17:52:32
    这两天都在看微信小程序开发,在看的过程当中,也会自己写写,有的时候,这个时候就会想到,以前项目当中如ReactJs里会有一些公共的组件好多地方都要用到,于就是想着微信小程序里如何提取出来。 在小程序里提取公共...
  • 微信小程序地图组件使用详情

    万次阅读 2018-07-23 12:30:18
    介绍下微信小程序内使用地图组件(这里只介绍小程序前端功能) 直接看代码吧 wxml <view class="section map_container"> <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" ...
  • 微信小程序中自定义组件使用封装: 官网API文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html 基本使用: 使用代码细节: 1.自定义的组件内容: //本例以...
  • 2.3.1微信小程序按钮组件:button

    千次阅读 2017-04-22 11:32:44
    微信小程序按钮组件:button 按钮组件。 属性名 类型 默认值 说明 最低版本 size String default 按钮的大小   type String default 按钮的样式类型   plain Boolean fal
  • 小程序提供的提示弹框没有错误,警告的样式只有success和loading的,但是在实际需求中需要很多的这样的提示框,简单的做了一个,供大家参考  效果预览: (此图片来源于网络,如有侵权,请联系删除! ) 代码介绍:  ...
  • 微信小程序 常见组件

    2021-09-25 21:18:14
    重点为小程序中常用的布局组件 view,text,rich-text,button,image,navigator,icon,swipe,radio,checkbox等 文章目录常见组件viewtextimageswiper 轮播图组件navigator 导航组件rich-text 富文本button外观属性开放...
  • 微信小程序-组件

    2019-11-14 15:18:53
    以canvas为例,小程序提供了wx.createCanvasContext方法来创建canvas的context。这是一个可以用于操作canvas的对象,对象下提供了很多绘图的方法,如“setFillStyle”方法可以设置填充样式,“fillRect”方法用于...
  • 微信小程序组件loading

    2016-10-18 14:21:00
    操作反馈loading:官方文档 Demo Code: Page({ data: { hidden: true }, loadingChange: function () { console.log("loadingChange log"); }, loadingTap: function () { this.setDa...
  • 本文介绍微信小程序组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可以添加的属性如下 hover-class 点击展示的类名 hover-stop-...
  • 微信小程序组件_小程序表单组件_小程序buttonbutton按钮。属性名类型默认值说明最低版本sizeStringdefault按钮的大小 typeStringdefault按钮的样式类型 plainBooleanfalse按钮是否镂空,背景色透明 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,261
精华内容 2,104
关键字:

微信小程序loading组件

微信小程序 订阅