【微信小程序/前端】实用样式相关内容简记

RogerQianpeng

已于 2023-04-18 15:46:52 修改

阅读量934

点赞数

分类专栏：微信小程序前端文章标签：前端 javascript 微信

于 2023-04-18 10:16:46 首次发布

本文链接：https://blog.youkuaiyun.com/RogerQianpeng/article/details/130215244

版权

0 前言

一些零散的点的简单记录

1 Vant

1.1 van-button

/* 取消点击按钮时，按钮变灰 */
.van-button--active:before{
   
  opacity: 0;
}

/* 按钮点击时缩小 */
.yourCustomButtonStyle:active{
   
  transform: scale(0.98)
}

/* 按钮添加渐变色 */

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

RogerQianpeng

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

万字长文Python面试题，建议先收藏

周萝卜的博客

07-30

537

vant 带关闭按钮div_[已解决]vant-ui源码vant-button的几个疑问

weixin_39628405的博客

12-22

499

业务背景用了uni-app一年啦,但是没有通用的ui框架,就想着自己仿vant-weapp,适配一下uni-app,能够在各个端上用这两天把button仿下来,但是里面有几个地方还存在疑问,关于css为什么要使用新的css变量?在package/common/style/theme.less文件下面好多css属性值都被替换成了原生变量了var(--$1, @{$1})可实际上,我在vant小程序示...

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序——VW、VH

tingyu_的博客

04-18

5676

vw和vh是css3中的中的新单位，是一种视窗单位，小程序中也同样适用小程序中，窗口固定宽度为100vw，将窗口宽度平均分为100份，每一份是1vw。小程序中，窗口固定高度为100vh，将窗口高度平均分为100份，每一份是1vh。 ...

van-button根据参数改变字体颜色，实现高度自定义

lrbtony的博客

09-15

2131

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器 style 为 css 时的写法如下。建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快。但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.1 >>> 如果vue的style使用的是css，那么则。

Vant van-button去除边框，自定义样式，改变组件自带的样式属性

z772330927的博客

05-06

2万+

van-button去除边框，自定义样式基本语法 <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <va...

van-uploader上传图片报错Invalid handler for event “load“(在uniapp编译)

热门推荐

李益

11-15

4万+

因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。 rpx适配 rpx是小程序中的尺寸单位，它有以下特征：小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWi...

按钮宽度

hugejihu9的专栏

01-22

1630

文章来自：源码在线https://www.shengli.me/css/619.html 效果：

Vant Weapp - 去除（清除）＜van-button＞按钮组件点击出现灰色背景效果

王二红

02-14

4252

前言正常引入组件后，点击按钮时会出现如下图所示灰色背景效果：解决方案 TIPS：如果您是小程序普通组件按钮，请参考官方文档，设置属性 hover-class="none" 即可去掉点击效果。打开按钮组件所在 wxss 文件，加入以下代码强制取消背景色： .van-button::before{ background-color:transparent!important; } 取消后的效果图： ...

Android笔记——Button点击事件几种写法

weixin_30835933的博客

12-04

428

Button点击事件：大概可以分为以下几种：匿名内部类定义内部类，实现OnClickListener接口定义的构造方法用Activity实现OnClickListener接口指定Button的onClick的属性首先我们简单地定义一个带Button的xml布局文件　　activity_main.xml: <Button and...

Vue 项目里戳中你痛点的问题及解决办法

大灰狼的小绵羊哥哥的博客

07-07

2312

最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V^列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题API接口的统一管理UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所有的轮播需求打包...

用 vant 组件仿京东选择按钮面板（更改 van-tag 字体颜色）

weixin_38591664的博客

12-19

1万+

一、前言 vant组件是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显：降低复杂度，隐藏无关细节。接下来主要介绍，如何在微信小程序上仿造出下方的京东选择按钮面板：二、组件选择：van-tag 为什么不选择 van-button 呢？因为 van-button不支持自定义背景颜色（background-color），除非更改 van-button 的源码。 ...

Vant Weapp使用方法

qq_31879671的博客

09-27

1241

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用两大参考神兽：文档：https://youzan.github.io/vant-weapp/#/intro 开源：https://github.com/youzan/vant-weapp 1：桌面新建一个vant文件夹 2：打开微信开发者工具，在这个文件里新建项目 3：从github上面下载源码文件：开源：https://github.com/youzan/va

给自定义组件添加单击事件

cbbgs_cb的博客

04-11

2437

自己定义了一个按钮按组件 <template> <div> <div class="endBtn"> <van-button type="danger" block color="linear-gradient( to left ,#F24B0B, #FF4A44 )">{{btnMsg}}</van-button> </div> </div> </template> &

vant Weapp组件库中自定义修改van-button 按钮宽高大小

zxcve的博客

05-16

1万+

原本的按钮尺寸支持large、normal、small、mini四种尺寸，默认为normal。 <van-button type="primary" size="large">大号按钮</van-button> <van-button type="primary" size="normal">普通按钮</van-button> <van-button type="primary" size="small">小型按钮</van-butt