小程序(一):Vant自定义组件的引用,自定义样式,自定义事件

已于 2022-05-10 01:44:17 修改
阅读量4.3k 收藏 4
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序 vue.js 前端
于 2022-05-10 01:26:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46368050/article/details/124675577
版权
本文介绍了如何在小程序中使用Vant Weapp组件库创建自定义组件，包括在Components文件夹下创建mybutton组件，设置样式，引入到me页面，并在me.wxml中传递title值。同时，讲解了如何为组件添加自定义属性如color和round，以及实现三目运算判断胶囊按钮效果。最后，讨论了如何在组件中添加自定义事件，解决连续双击问题。
摘要由CSDN通过智能技术生成

目录

一、自定义组件的运用

1.我们利用Vant组件库来制作我的个人信息 页面:Vant Weapp - 轻量、可靠的小程序 UI 组件库

2.注意先看文档:快速上手,和自定义组件介绍页面​

3.在Components文件夹下新建文件夹取名叫mybutton

4.在mybutton文件夹下新建Component 取名叫index

 5.在index.wxml里写入一个按钮,在index.wxss中写按钮的样式

5.1 在index.wxml里写入一个按钮

5.2在index.wxss中写按钮的样式

5.3在pages下创建me文件页面

6.在me.json和me.wxml中引用自定义组件

 6.1在me.json

6.2在me.wxml中引用自定义组件

7.me.wxss和me.wxml中书写:

 效果:

7.1 me.wxml 的title在mybutton中的index.js中声明,这样就可以是的默认按钮的值,可以被赋值为title中的值

 7.2 在index.wxml中利用{ {title}}来接住me.wxml里title传递过来的值,这样页面就有效果了

效果

7.3 自定义新属性color

​效果

 7.4 自定义新属性round 

index.wxml中border-radius运用三目判断点击购买是否会变成胶囊按钮

效果 

二、为组件添加自定义事件

 完整代码:

mybutton/index.js

 mybutton/index.js

 mybutton/index.wxml

 mybutton/index.wxss

pages/me/me.js

pages/me/me.json

pages/me/me.wxml

pages/me/me.wxss

完整代码gitee仓库查看:

一、自定义组件的运用

1.我们利用Vant组件库来制作我的个人信息 页面:Vant Weapp - 轻量、可靠的小程序 UI 组件库

2.注意先看文档:快速上手,和自定义组件介绍页面

3.在Components文件夹下新建文件夹取名叫mybutton

 

4.在mybutton文件夹下新建Component 取名叫index

会自动创建组件index 4件套

 

 

 在js中page开头的是页面 component开头的是组件

 5.在index.wxml里写入一个按钮,在index.wxss中写按钮的样式

5.1 在index.wxml里写入一个按钮

<view class="button">默认按钮</view>

5.2在index.wxss中写按钮的样式

.button{
  display: inline-block;
  padding: 20rpx 25rpx;
  background-color: crimson;
  color: white;
}

5.3在pages下创建me文件页面

6.在me.json和me.wxml中引用自定义组件

 6.1在me.json

{
  "usingComponents": {
    "my-button":"
最低0.47元/天 解锁文章
学无止境QAQ
关注
专栏目录
vant组件库入门
weixin_57569609的博客
04-28 4389
vant组件库 1.vant组件库-介绍，安装 2.全部引入 3.手动按需引入 4.自动按需引入 5.弹出框使用 6.表单使用 1.vant组件库-介绍 Vant Weapp 是移动端 Vue 组件库Vant的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。 ...
小程序 使用 UI 组件 Vant Weapp 、vant组件样式覆盖
最新发布
weixin_44166849的博客
07-04 679
在自定义组件的 wxml 中 给button 组件添加外部样式类 custom-class。到app.wxss 文件 定义page。然后在 wxss 文件中直接修改样式。然后到 使用 公共组件 wxss 中。自定义组件的 wxss。
自定义vant中的样式
smx_123的博客
12-02 1777
定制vant组件样式
自定义vant组件样式
Hjiehahah的博客
03-14 1472
学习修改vant组件样式无法显示的问题 由于scoped只对当前.vue文件中的template模板标签内的结构有效，所以在含有scoped属性的style标签中修改vant组件样式是无效的。 所以先确保.vue文件的style标签没有使用scoped属性，然后在浏览器中查看想要修改的组件的类名即可。 如上所示新添的样式已经覆盖原有的样式。 但如果使用了大部分的default类型的button组件，然后只是修改部分的样式，上面的写法就不太合适了，因为它会作用于当前页面的所有.van-butto.
vant 定制主题样式 （vue2, vue-cli3,vant2）
曾经沧海难为水
08-23 2919
vant 自定义主题样式 总共分为两步 步骤一 引入样式源文件 定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。 按需引入样式（推荐） 在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式。 module.exports = { plugins: [ [ 'import', { libraryName: 'vant', libraryDire
从 VantComponent 谈 小程序维护
weixin_33966095的博客
04-27 680
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序vant弹窗组件的实现方式
10-15
【微信小程序vant弹窗组件的实现方式】 在前端开发中，弹窗组件是常见的交互元素，用于提供信息提示、用户确认、数据输入等场景。Vant Weapp 是由有赞团队开发的一款专为微信小程序设计的UI组件库，它提供了灵活、...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
微信小程序自定义select下拉选项框组件的实现代码
10-18
2. **配置组件**：在`select.json`中，确保包含`"component": true`声明，表明这是一个自定义组件。在`select.js`中，定义组件的属性（如`innerText`），内部数据（`someData`）以及方法（如`customMethod`）。例如...
微信小程序自定义标题组件
03-11
然而，如果想要自定义样式和功能，我们就需要在 WXML 和 WXSS 文件中编写自定义组件。 自定义标题组件的创建通常包括以下几个步骤： 1. **创建组件文件**：在项目的 components 目录下，创建一个名为 `custom-...
vant自定义二级菜单操作
01-18
（1）组件解释： 本组件是为了解决二级联动的效果编写的，这里使用了省份和城市分开的效果，具体展示效果，可以参考下面。 （2）组件代码： <template> <div> <button @click=showM>{{ value || 选择省份 }}</button> <button @click=showC>{{ value2 || 选择城市 }}</button> <!-- 省份 --> <van v-model=showPicker position=bottom> <van-picker show-toolbar :colum
van 自定义组件_vant 自定义 van-dropdown-item的用法
weixin_39889642的博客
12-19 2579
我们还是这个item 我们要在里面加东西 这可咋整请选择xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx确定取消这代码怎么粘上来这么丑我们要这个效果 中间可以自由滚动 上下固定我们直接给最外层的一个弹性盒加换轴方向 中间 给 overflow-x：hidden； flex：1.choice {w...
vant组件库-dropdownMenu组件自定义title vue技术交流群（864583465)
JCAL123的博客
04-28 2638
vant组件库-dropdownMenu组件自定义title 在利用vue开发h5页面时，通常我们选择的是vant作为我们的组件库，它提供60多个高质量组件，覆盖移动端各类场景。正如大多数组件库一样，很多都有这样或那样的bug，vant也是如此，本文要说的是vant中dropdownMenu组件自定义title无法及时更新title内容的bug。 1、首先看下面一段代码 <template> <div class="test"> <van-dropdown-menu
笔记 : 自定义组件二次封装vant 并继承原有的,属性,插槽,事件, 和style , class属性
weixin_45595621的博客
05-16 165
##在这里以 checkbox 举例,这里没有直接继承所有事件。
vant组件修改样式,修改vant框架组件，实现tab组件增加自定义事件
weixin_32676541的博客
03-27 3246
修改vant框架组件，实现tab组件增加自定义事件修改vant框架组件，实现tab组件增加自定义事件在使用vant组件中，项目需要我们把框架的组件修改，加多一个按钮，用做用户的偏好设置需求：要求按钮不能影响组件的欢动效果，并且也要拥有组件的粘性定位布局组件：我们修改框架组件是很麻烦的事情，vue的vant 不能直接修改组件结构，所以我们不会使用修改结构的方法，修改标签的数据也会很麻烦，所以我们直接...
Vant组件库的按需引入
04-16 1269
配置好自动按需引入后，Vant 中有个别组件仍然需要手动引入样式，本篇文章就来解决这一痛点！
vant 组件库
259的博客
12-30 921
vant 组件库
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值