Vant Weapp小程序蹲坑之使用checkbox组件

引子

checkbox-group及checkbox组件是开发小程序中频繁使用的组件,当然在vant weapp组件库中对应的分别是van-checkbox-group和van-checkbox。遗憾的是,官方提供的仅是组件在原生微信小程序框架下的用法,但我们所关注的是如何把这些组件改写到mpvue框架中。有关此二组件常用属性,在文后引用地址(官方)都有详细介绍,在此省略。

问题1:数据绑定与模板字符串问题

这个问题困绕了我很长时间,搜索网络,包括google英文搜索,几乎没有找到相应的答案。首先,请看下面官方提供的组件在原生微信小程序框架下的用法:

<van-checkbox-group value="{{ result }}" bind:change="onChange">
  <van-cell-group >
    <van-cell
      wx:for="{{ list }}"
      wx:key="index"
      title="复选框 {{ item }}"
      clickable
      data-name="{{ item }}"
      bind:click="toggle"
    >
      <van-checkbox catch:tap="noop" class="checkboxes-{{ item }}" name="{{ item }}" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

请注意上面van-cell组件的title组件与van-checkbox组件的class属性表达方式,在转换成mpvue框架下的表达时,我相当然地表达成下面这样:

<van-checkbox-group :value="result" @change="onChange">
  <van-cell-group >
    <van-cell
      v-for="item in list"
      :key="index"
      :title=`复选框${item}`
      clickable
      :data-name="item"
      @click="toggle"
    >
      <van-checkbox @tap="noop" :class=`checkboxes-${item}` :name="item" />
    </van-cell>
  </van-cell-group>
</van-checkbox-group>

结果编译都通过不了!

解答:

通过美团开源官方上问题集处(引用地址2)得到初步答案提示,说:
“目前是直接把 template 转译成 wxml ,wxml 不支持 ``,所以目前暂无法支持”
即由于微信小程序官方(时间是2018年8月,至今仍然不支持)的wxml语法中不支持ES6的模板字符串表达方式,所以mpvue官方(因为其最终也是走转换成wxml的路子)也宣布不支持,只是没有在醒目的文档说明中提到(这真正是一个“坑”啊)。那么,如何修改上面非常明确的常用需求呢?经过反复试验,方式如下(只写关键部分):

:title="‘复选框‘+item"
:class="‘checkboxes-‘+item"

有上述需求的同学可要好好观察一下了!这里没有使用到模板字符串中反向单引号,在双引号的里面可以归纳成由单引号字符串组成的通过加号连接的字符串加法,只不过参与加法的一些部分是字符串变量而已。

问题2:selectComponent方法的使用

官方资料中提到:selectComponent用于微信小程序开发中获取自定义子组件,详情见引用资料3。那么,官方示例中提到的方法(如下)如何改写呢?


toggle(event) {
    const { name } = event.currentTarget.dataset;
    const checkbox = this.selectComponent(`.checkboxes-${name}`);
    checkbox.toggle();
  }
请看下面的答案。
# 解答:
   toggle(event) {
        const {name} = event.mp.currentTarget.dataset;
        const box =this.$mp.page.selectComponent(`.checkboxes-${name}`)
        box.toggle();
      }

注意,上面使用了标准的ES6中模板字符串表达方式,因为这里不是wxml文件中,而是vue文件中的<script>脚本片断中,是没有问题的。有兴趣的同学可以详细调试分析这里提到的几个值,例如this.$mp;恕在此不赘述。

补充1

van-checkbox组件默认情况下显示的是单选按钮形式的图标,因此需要使用shape属性修正一下为好,如下所示:


<van-checkbox v-for="item in list" :key="index" :name="item"  shape="square">
          选项 {{ item }}
        </van-checkbox>

这里的shape属性值默认为circle。经上述修改即成为常见的方形的复选框图标了。

补充2

在同学们学习官方提供的checkbox定制图标示例中,如果是使用本地图标文件,记得要使用绝对地址方式,相对地址出现找不到的错误提示。正确方式类似如下表达:

    ```

icon: {
normal:‘/static/images/custom_normal_checkbox.png‘,
active:‘/static/images/custom_active_checkbox.png‘
}



# 引用
1.https://youzan.github.io/vant-weapp/#/checkbox
2.https://github.com/Meituan-Dianping/mpvue/issues/845
3.https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=selectComponent

原文地址:http://blog.51cto.com/zhuxianzhong/2349093

时间: 2024-10-31 04:10:29

Vant Weapp小程序蹲坑之使用checkbox组件的相关文章

Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题.坑来坑去,先上示例代码吧,由简单到复杂顺序. main.js代码 main.json代码 index.vue代码 <template> <view> <van-panel title="基础用法"> <van-submit-bar :price="3050" button-text="提交订单" @submit=&

Vant Weapp小程序蹲坑之使用toast组件

问题 使用Mpvue框架结合Vant Weapp组件库进行微信小程序开发中使用toast组件时,不小心又陷入"坑"中,当然主要还是路径问题. 注意点 使用toast组件时,与其它最普通的Vant Weapp组件相比,有几点需要注意.为了更方便理解,还是先上源码(index.vue),如下: <template> <div> <van-panel title="基础用法"> <van-picker :columns="

Vant Weapp小程序蹲坑之navigateTo:fail page not found

问题 当前调试的小程序中使用了wx.navigateTo导航方案,运行中出现如题所示错误.初步感觉这种提示再直观不过,但是由于工具使用经验不足,还免不了"浪费"一些时间去搜索问题的根源. 解答 在确定页面及路径的确存在且表达无误后,只好把注意力转移到其他几个相关文件的表达上.已知:在mpvue+vant weapp方案下,一个典型的小程序页面典型包括三个文件,如下图所示: 对比几个已经调试通过的页面文件,我打开了图中所示的本页面配置文件main.json,发现内容如下: { "

Vant Weapp小程序蹲坑Page is not constructed because it

问题 完整的错误提示应当是"Page is not constructed because it is not found",对应截图如下: 在纠结了N遍后,发现:dist路径下没有生成.vue.wxml文件!?正常编译通过的dist路径下应当是生成.vue.wxml文件的,如下所示: 即没有生成index.vue.wxml,其他几个文件都生成了. 从错误的字面意思上分析是"页面没有构造成功,因为没有找到它".前面二十多个页面都通过了,其基本框架与思路与之一致,而且

小程序-文章:微信小程序常见的UI框架/组件库总结

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

微信小程序内如何使用vant-weapp组件

vant-weapp文档:https://youzan.github.io/vant-weapp/#/quickstart 快速上手: 1.在项目文件夹根目录下打开终端且输入命令npm init初始化生成一个package.json的文件 2.通过npm安装:npm i @vant/weapp -S --production 3.构建npm包: 先打开微信开发者工具,点击 工具 -> 构建 npm: 构建完成后,会生成一个 miniprogram_npm文件夹就成功了 4.构建完成后,使用前准备

微信小程序学习笔记-2-常用组件介绍

微信小程序常用组件 组件的定义: 开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发,什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间. 形式: <tagname property="value"> Content goes here </tagname> 例如: <view class="container">

微信小程序入门与实战/常用组件/API/开发技巧/项目实战 共11章

实战开发电影资讯微信小程序 学习之前需要掌握JavaScript和CSS基础 ----------------课程目录---------------- 第1章:什么是微信小程序 开篇及课程特色介绍 直观感受一下微信小程序 小程序适合做什么样的应用 对开发者的影响 学习基础 小作业 第2章:环境搭建与开发工具 开篇介绍及下载工具 小程序目前情况及限制 小程序开发工具介绍 第3章:开始小程序之旅 本章内容简介 官方种子项目介绍与小程序的文件结构 新建我们自己的项目:ReaderMovie 开始制作项