精华内容
下载资源
问答
  • vant 小程序Stepper 步进器阻止事件冒泡vant官网Stepper 步进器事件函数代码块 在使用vant开发小程序购物车的时候,使用Stepper 步进器改变商品选购数量,遗憾的是在父级有checkbox,所以导致我在改变步进器数值的...

    vant 小程序Stepper 步进器阻止事件冒泡


    在使用vant开发小程序购物车的时候,使用Stepper 步进器改变商品选购数量,遗憾的是在父级有checkbox,所以导致我在改变步进器数值的时候同时也选中/取消了checkbox,我知道这是属于事件冒泡的行为,为了阻止这个事件冒泡,小程序的js无法实现 event.stopPropagation(); 小程序阻止事件冒泡的行为是使用catchtap事件,但是看了官网-----如下,没有说阻止事件冒泡,于是就尝试了下catchtap事件,catchtap=“onChange” 依然能触发change函数,也完美的阻止了事件冒泡行为。

    vant官网Stepper 步进器事件函数

    Events
    事件名 说明 回调参数
    bind:change 当绑定值变化时触发的事件 event.detail: 当前输入的值
    bind:overlimit 点击不可用的按钮时触发 -
    bind:plus 点击增加按钮时触发 -
    bind:minus 点击减少按钮时触发 -
    bind:focus 输入框聚焦时触发 -
    bind:blur 输入框失焦时触发 -

    代码块

    <van-checkbox name="a" label-class="car-product-item-cell">
      <van-card price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/apple-2.jpg" lazy-load>
        <view slot="num" class="car-product-itemStepper">
          <van-stepper value="{{ 1 }}" catchtap="onChange" />
        </view>
      </van-card>
    </van-checkbox>
    
    展开全文
  • vant小程序SwipeCell 完美解决滑动单元格右滑无样式解决方案结果 这个bug是比较坑人的! 直接引入后发现右滑无样式 代码如下: <van-swipe-cell right-width="{{ 65 }}"> <van-checkbox name="a" label-...

    vant小程序SwipeCell 完美解决滑动单元格右滑无样式

    这个bug是比较坑人的!


    直接引入后发现右滑无样式

    在这里插入图片描述
    代码如下:

    <van-swipe-cell right-width="{{ 65 }}">
      <van-checkbox name="a" label-class="car-product-item-cell">
        <van-card price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/apple-2.jpg" lazy-load>
          <view slot="num" class="car-product-itemStepper">
            <van-stepper value="{{ 1 }}" catchtap="onChange" />
          </view>
        </van-card>
      </van-checkbox>
      <view slot="right">删除</view>
    </van-swipe-cell>
    

    解决方案

    添加样式到wxss

    .van-swipe-cell__left,
    .van-swipe-cell__right {
      display: inline-block;
      width: 65px;
      font-size: 15px;
      color: #fff;
      text-align: center;
      background-color: #f44;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
      -webkit-box-pack: center;
      -webkit-box-align: center;
    }
    

    结果

    在这里插入图片描述

    展开全文
  • taro3 开发模板 引入 vant install git clone --recursive
  • vant 小程序踩坑之Toast

    2020-07-29 16:17:18
    官方给的路径是这样 import Toast from ‘path/to/@vant/weapp/dist/toast/toast’; 报错 修改后 import Toast from ‘@vant/weapp/toast/toast’; 可以正常使用了 在页面引入按照官网方式就可以了

    官方给的路径是这样
    import Toast from ‘path/to/@vant/weapp/dist/toast/toast’;
    报错
    修改后
    import Toast from ‘@vant/weapp/toast/toast’;
    可以正常使用了
    在页面引入按照官网方式就可以了

    展开全文
  • }, } }) 如果想要在beforeClose获取data中某个属性,是不能用this.data获取data中的数据,这样是获取不到数据的 可以通过微信小程序——getCurrentPages(获取当前页面栈)来获取data const pages = ...
    
    ## 错误示例
    //index.wxml
    <van-dialog 
    	use-slot 
    	title="用户须知" 
    	show="{{ showDialog }}"
    	beforeClose="beforeClose">
      <view class="dialog-content"></view>
    </van-dialog>
    //index.js
    **js:这个方法写在了Page页面下,与data同级**
    page({
    	data:{
    		showDialog:true
    	},
    	beforeClose() {
    	    return new Promise((resolve) => {
    	      setTimeout(() => {
    	        if (action === 'confirm') {
    	          resolve(true);
    	        } else {
    	          // 拦截取消操作
    	          resolve(false);
    	        }
    	      }, 1000);
    	    });
    	})
      },
      ## 正确示例应该是这样子
      //index.wxml
    	<van-dialog 
    	use-slot 
    	title="用户须知" 
    	show="{{ showDialog }}"
    	before-close="{{ beforeClose }}">
    	  <view class="dialog-content">
    	  </view>
    	</van-dialog>
    	//index.js
    	Page({
    	  data: {
    	  	showDialog:true,
    	    beforeClose(action) {
             return new Promise((resolve) => {
                setTimeout(() => {
                  if (action === 'confirm') {
                    resolve(true);
                  } else {
                    // 拦截取消操作
                    resolve(false);
                  }
                }, 1000);
              });
            },
    	  }
    	})
    	如果想要在beforeClose获取data中某个属性,是不能用this.data获取data中的数据,这样是获取不到数据的
    	可以通过微信小程序——getCurrentPages(获取当前页面栈)来获取data
    	const pages = getCurrentPages()
        let page = pages[pages.length-1]
        page就是当前页面
        此时就可以用page.data来获取当前页面的属性
    
    展开全文
  • vant官方文档事件 事件名 说明 回调参数 bind:change 当绑定值变化时触发的事件 event.detail: 当前输入的值 每次点击加或减都会触发我顶层view的跳转事件 微信开发文档里介绍 除 bind 外,也可以用 catch 来...
  • "van-submit-bar": "@vant/weapp/submit-bar/index" } 然后在wxml里写入 <van-submit-bar price="{{ pri }}" button-text="提交订单" bind:submit="onSubmit" class="refer" //给它一个class tip="{{ true...
  • mpvue中使用vant的slider组件 发现绑定的change函数无效
  • 2.重新自己去写一个组件,因为项目已经完成,只不过就是一个背景颜色,为了这么的需求去写一个比较庞大的组件,想想工作量,放弃了. 3.终极解决方案:逛了逛github和论坛,发现也有人遇到这些问题,解决方案就是在最后面...
  • 小程序引入vant

    2020-10-26 01:28:01
    vant小程序开发指南 http://vant-contrib.gitee.io/vant-weapp/#/intro 配置 小程序工具栏右侧详情中设置 使用npm模块 构建npm 如果产生报错(例如找不到文件之类的) 可以试着将node_module中@vant/weapp/...
  • Vant小程序组件 1、自己封装的gitee Vant 链接:https://vant-contrib.gitee.io/vant/#/zh-CN/ 点击切换小程序 成功后就会看到 小程序Ul组件库 构建 npm 包 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选...
  • vant 小程序ban:https://github.com/youzan/vant-weapp
  • vant微信小程序.rar

    2020-09-28 14:37:19
    小程序引用vantweapp的组件,小程序引用vantweapp的组件,小程序引用vantweapp的组件,小程序引用vantweapp的组件小程序引用vantweapp的组件
  • Vant Weapp 是有赞移动端组件库 Vant小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
  • 微信小程序Vant

    2020-08-11 10:11:13
    微信小程序 VANT的使用方法 1.打开该项目终端 进行 npm init 进行初始化 2.下载 npm i @vant/weapp -S --production 3.打开微信小程序开发工具,构建npm 4.引入方式 a.在app.json中进行设置全局引入 // ...
  • 微信小程序引入vant-webapp的正确姿势

    千次阅读 2020-06-07 19:59:43
    3.npm 安装vant小程序专用包。 cmd中输入:npm i @vant/weapp -S --production安装vant/webapp小程序专用包。 4.去微信开发者工具里构建npm和使用npm 模块 进入微信开发者工具,依次点击左上角工具——>构建...
  • 今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源。 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm...
  • 最近使用vant小程序ui时发现上传了图片竟然不能删除,这就很尴尬了,但是这当然难不到我了,首先右键检查一下元素 发现删除图标有个方法deleteItem去查找原代码 发现源代码有个delete方法可以传给父组件,父组件...
  • 小程序Vant使用教程

    千次阅读 2019-06-20 17:09:09
    Vant Weapp 是有赞移动端组件库 Vant小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...
  • 小程序引入Vant Weapp

    2020-07-28 16:16:50
    引入Vant Weapp,在小程序的根目录执行,生成node_modules npm i @vant/weapp -S --production 使用npm模块打钩,工具-》构建npm,结束出现miniprogram_npm 微信小程序使用 内置样式,app.wxss文件中加入 @...
  • 说明: 在wx小程序的项目中加入第三方组件vant,实现vant组件中样式的调用。 最终测试结果如下所示:以首页为例,根据按钮的type类型,...vant小程序版本主页 Node.js安装及环境配置(别人) 操作步骤: 创...
  • 分享一个Vant Weapp小程序UI组件库

    万次阅读 2018-08-21 11:25:38
    Vant Weapp官方地址:...Vant Weapp 是有赞移动端组件库 Vant小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 预览 扫描下方小程序二维码,体验组件库示例: ...
  • wepy+vant 微信小程序开发总结

    千次阅读 2019-10-11 10:53:43
    本次小程序开发选择使用 wepy作为小程序第三方框架,在UI组件库方面选择的是有赞的移动端组件库Vant去快速搭建小程序应用。这次小程序功能需求并不是特别复杂,目前亲测功能基本满足。这段时间刚好工作空闲期,决定...

空空如也

空空如也

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

vant小程序