uniapp使用 Vant Weapp 组件，CSS的伪类和伪元素

最新推荐文章于 2024-06-18 17:15:03 发布
最新推荐文章于 2024-06-18 17:15:03 发布
阅读量447 收藏 9
点赞数 3
分类专栏： 2024年程序员面试 文章标签： uni-app css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61040489/article/details/136912527
版权
本文介绍了如何在uniapp中直接通过import方式使用Vant Weapp组件，避免了繁琐的页面配置步骤。通过实践证明了这种方法的可行性，并展示了成功应用的效果。同时，作者分享了自己的前端开发经历，以及为想要提升技能的前端工程师提供了一份全面的学习资料。
摘要由CSDN通过智能技术生成

我把 vant 下载到 src目录下 wxcomponents 文件夹

image.png

src/wxcomponents/vant

在页面中使用这些组件, 网上看的方法都是 (可能我没找到) 要在 页面json里面配置然后才能在页面中使用. 觉得这样超级麻烦啊, 页面跳来跳去的…

image.png

image.png

办法

既然 uni 中高度接近vue, 其他组件可以使用 import 方式, 那应该引用小程序组件也可以吧
然后试了一下
image.png
果然是可以的!
看效果>>>>
image.png
uni 自动帮我们生成到配置json去了.

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深

最低0.47元/天 解锁文章
广东程序员鱼
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-App 移动端伪元素定位 样式
Landlord_cat的博客
08-13 1536
&::before { content: ''; height: 0; width: 0; display: inline-block; position: absolute; right: -4rpx; bottom: -20rpx; border-width: 28rpx 0 28rpx 28rpx; border-style: solid; border-color:transparent transparent
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
mpvue-vant 是一个专门为 Mpvue 开发者准备的仓库，记录了如何在Mpvue中使用Vant Weapp组件库的实践经验和注意事项。这个教程由多位开发者共同完成，确保所有Vant Weapp组件在Mpvue中都能正常工作。 ### 二、使用...
uniapp scroll-view左侧菜单栏通过伪元素实现active选中效果
黎小小的博客
06-01 361
【代码】uniapp scroll-view左侧菜单栏active选中效果。
uniapp使用伪元素实现气泡
最新发布
abs625的博客
06-18 643
uniapp利用css实现气泡效果
uni-app中动态修改伪类元素的样式
Blooming_x的博客
08-28 1369
1.首先定义一个变量 2.在伪元素的父元素上面动态添加style，注意这个 设置的变量 --state 因为下面是 var 调用的所以需要加两个杠. 3.使用var调用变量 --state
【uni-app 怎么写伪类，怎么在伪类中使用icon字体图标】
TChildeSeven的博客
07-29 2089
uni-app 怎么写伪类，怎么在伪类中使用icon字体图标 1.问题描述，为什么要写伪类 大家是否在写代码中经常遇到这样的事情，如果写一个价格标签￥2.50，符号要小写，价格要变颜色，那你的第一想法是不是写两个标签和两个样式分开放？那写伪类相对于就方便很多，只需要写一个标签一个类名，就能相当于三个标签使用 2.怎么写伪类 先给需要写伪类的标签一个相对定位，然后通过::before或者::after在标签的前面或者后面添加伪类，一个标签一个类完成了两件事 <template> <vi
修改后的能够在uniapp项目中使用的 Vantweapp
07-24
解压当前压缩包，直接放在uniapp项目wxcomponents目录 引用即可 修改后的Vantweapp在uniapp项目里使用不会报错 修改里面的px单位为微信小程序里的rpx 已在发布的微信小程序里使用
基于Vite、uniapp和vantweapp的微信游戏商城小程序源码.zip
06-06
综上所述，这个压缩包包含了一个使用Vite、uniapp和vantweapp构建的微信游戏商城小程序的完整源代码，开发者可以通过研究这个项目来学习如何利用这些技术进行微信小程序的开发，了解现代前端工具的使用方法，以及...
微信小程序使用Vant Weapp组件库的方法步骤
10-16
主要给大家介绍了关于微信小程序使用Vant Weapp组件库的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
vantweapp的使用
01-20
npm i vant-weapp -S –production 回车进行npm的安装。 3、此时还没有安装完成，选中小程序点击开发工具中的“工具”选项——>点击构建npm。 4、此时查看项目，出现package.json（这是配置文件）文件以及其它一些...
uniapp中动态修改伪类元素的样式
源码好优多
06-15 2525
前言写个组件需要改变伪类元素的样式 css中如何用变量 声明css变量的时候，变量名前面要加两根连词线（–）。 变量名大小写敏感，–header-color和–Header-Color是两个不同变量。 var()函数用于读取变量。 var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。 第二个参数不处理内部的逗号或空格，都视作参数的一部分。 1声明变量 <view class="left-border" :style="{ '--border-left'.
[原创] uniapp踩坑-伪类的使用
大象的博客
12-27 8092
项目描述：项目是使用uniapp开发，开发一个跨平台的app，但是调试是在小程序开发工具中调试。 问题描述：项目中使用字体图标，想实现的效果如下，一个简单的人头图标 按照以往开发web的经验，只需要css中加上before，并加上自己的字体图标的编码即可，代码如下 //图标后面的数字 .actionInfo_number{ float: left; margin-left:20px; } /...
uniapp的按钮后面的after问题
m0_74528956的博客
03-26 282
背后有个after伪元素的显示问题，我试了试穿透，但无法直接穿透修改，穿透失效了；后面用class类给它的after设置，就能成功修改，这里。我们在写uniapp的时候,很多时候用到button按钮；在设置按钮的样式，比如尺寸大小或者颜色等修改，会出现这种。这个.but就是对应的你的元素的class="but"
UniApp项目中引入Vant-Weapp的终极指南：详解局部全局引入的最佳方法
热门推荐
weixin_57905352的博客
06-08 2万+
uniapp项目中引入vant-Weapp（局部全局都有 史上最详细的方法，亲测有效）
uni-app初次学习使用
qq_44695769的博客
04-06 1287
样式 按照我以前的习惯，都是用less编译css样式文件，然后再在index,html文件里面引入，但是我发现在编译uni-app移动端文件的时候发现，有点杀鸡用牛刀，因为移动端一个界面的内容本来就少，不像pc端那么复杂，所以可以直接写在文件里面的style里面 还有，建议不要使用第三方ui框架，因为会出现样式失效的问题。uni-app有官方的ui组件，走别人的路，让别人走投无路。 微信小程序端 里面好像要在最外层包裹一个page，不然的话使用类名选择器好像会失效 伪类选择器 尝试了一下伪类选择，没有成功，
uni-app知识点和项目上遇到的问题和解决办法的记录
动感超人的博客
07-22 1665
参考文章@flex布局设置space-between(around)最后一行不左对齐问题-解决办法@[译]当咱们在使用displayflex的时候，到底发生了什么？大家可能都遇到过下面这种情况,在布局的时候我们不得不设置并且效果本来想是下面这张图右边的效果,但是显示的却是左边的效果了其实解决也很简单,在最外层添加一个伪类即可html结构...
uniapp开发小程序引入vant-weapp流程
m0_58293192的博客
10-14 1959
uniapp开发小程序引入vant-weapp流程
uniapp使用Vant-weapp（最新）
shmilynn_的博客
01-11 6194
目录1.先正常创建一个uniapp项目2.从github下载vant包，zip格式的3.项目根目录下新建wxcomponents/@vant 两个文件夹文件夹 4.把下载好的压缩包解压，放在刚才创建好的@vant文件下，并重命名为weapp5.App.vue中引入vant的样式 6.在pages.json文件下的 "globalStyle" 下的"usingComponents" 中按需引入7.页面中使用，如果没有样式从uniapp重启微信小程序总结： vant组件包https://github.com/
uniapp引入vantweapp
05-25
要在UniApp中使用Vant Weapp，需要进行以下步骤： 1. 下载Vant Weapp组件库。可以从GitHub上下载或使用npm安装。 2. 将Vant Weapp组件库复制到UniApp项目的static...这样就可以在UniApp中使用Vant Weapp组件库了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值