微信小程序按钮

微信小程序button组件样式

韦弦Zhy关注

22018.07.03 19:21:14字数 438阅读 108,988

button.png

上图下字.png

需要使用微信小程序button组件open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

默认状态
<button>确定</button>

此时,各项值均为默认值,效果如下:有边框以及圆角

默认状态.png

设置其css如下:背景颜色background-color文字颜色color,设置typeprimary是背景色为微信绿,无法设置背景颜色

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
}

设置背景颜色和文字颜色.png

修改圆角:
.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: beige;
  color: white;
  border-radius: 98rpx;
}

屏幕快照 2018-07-03 18.52.02.png

效果并不好,此时增加
.btn1::after {
  border-radius: 98rpx;
}

效果图如下:

完美圆角效果.png

如果需要取消边框,在::after中增加border: 0;

无边框button.png

这样子的button是达不到UI的要求的,我们还需要添加图片。。。不让自定义。。。没啥前端基础,开始直接在button里面加了张图片,可是就是对不齐,后来问了下别人,然后下面是答案(其实这个我也会啊,突然就是想不到。。。):
 <button class=‘btn1‘ open-type=‘openSetting‘>
    <image class=‘btnImg‘ src=‘../../images/wechat.png‘></image>
    <view>确定</view>
 </button>

.btn1 {
  width: 80%;
  margin-top: 20rpx;
  background-color: burlywood;
  color: white;
  border-radius: 98rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.btnImg {
  margin-right: 8rpx;
  width: 46rpx;
  height: 46rpx;
}

.btn1::after {
  border-radius: 98rpx;
  border: 0;
}

效果图如下:

带图片icon的Button.png

还有上图下字效果:
 <button class=‘btn1‘ open-type=‘contact‘>
    <image class=‘btnImg‘ src=‘../../images/客服.png‘></image>
    <view>联系客服</view>
 </button>

  <button class=‘btn2‘ open-type=‘openSetting‘>
    <image class=‘btnImg‘ src=‘../../images/设置.png‘></image>
    <view>授权设置</view>
 </button>

.btn1{
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.btnImg {
  width: 50rpx;
  height: 50rpx;
}

.btn1::after {
  border: 0;
}

 .btn2 {
       width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  background-color: white;
  color: #999999;
  border-radius: 0rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
 }

 .btn2::after {
  border: 0;
}
效果图如下:

上图下字.png

点击高亮状态
    //设置none则无高亮状态
    hover-class="none"
    //可以绑定一个class,到css中设置高亮样式
禁止点击状态
disable="true"

此时按钮状态由系统决定,无法改变,但是有时我们又需要自定义,所以

 <button class=‘{{canSubmit ? "submit": "submitDis"}}‘ hover-class="none">确定</button>

根据是否可点击状态分别绑定不同的class,最后在点击事件回调中中判断,如果是禁止点击的则直接return
同时,hover-class也可以绑定为一个样式和一个"none",在可点击时,有点击效果,这样比较好的模拟了disable状态,又自定义了效果。

赏我一个赞吧~~~


微信小程序按钮点击色

单抽律化娜关注

2018.11.29 14:41:25字数 740阅读 2,226

hover-class属性

微信文档上的button有个hover-class属性,是指定按钮 按下去 的样式类,意味着可以设置按钮点击后的背景色,但是文档上说的很模糊,也很简单,其实里面还是有玄机的,先来看看下面的例子:

/// index.wxml

<view class=‘myView‘>

<button class=‘myButton‘ hover-class=‘button-hover‘>点击变色</button>

</view>

/// index.wxss

.myButton {

width: 100%;

height: 90rpx;

yellow;

}

.button-hover {

red;

}

很简单的样式,点击按钮,改变按钮的背景色,上面已经演示了是没问题的,那么再来看看下面的:


/// index.wxss

.myView .myButton {

width: 100%;

height: 90rpx;

yellow;

}

.button-hover {

red;

}

对比上面wxss,我只加了一个  .myView (加大字体的那个),.myView .myButton 等价于 .myButton,都是指那个按钮,为何这样写,点击下去按钮不会变红色呢,原因在于微信文档里面没提到的权值问题,下图是网上一张权值计算图:

权值计算图

内联样式,权值1000;ID选择器,权值100; 类、伪类、属性选择器,权值10; 类型选择器、伪元素选择器,权值1 。

在权值比较中,有种情况是都选中相同组件,那么样式是由权值大的层叠权值小的。

.myView.myButton 标签选中那个按钮,.button-hover标签也选中了那个按钮,两者都选中了相同组件,权值大的层叠权值小,.myView.myButton 的权值为20(10+10),.button-hover 的权值为10,所以.myView.myButton 里的背景色yellow,层叠了 .button-hover的背景色red,所以不会变为红色。

/// index.wxss

.myView .myButton {

width: 100%;

height: 90rpx;

yellow;

}

.myView .button-hover {

red;

}

如果在.button-hover 前面加上 .myView,那么按钮点击下去,因为权值相同,所以只看代码顺序,红色背景的代码在黄色背景的代码下方,所以红色会覆盖黄色,按钮点击就会变色。

要如何避免按钮点击样式由于权值问题而被不知不觉间覆盖,我总结了以下:

1、通用点击色,代码放到所有代码最后面

2、如果想直接.button-hover就控制点击色生效,按钮就不要太复杂,直接 .类名,这样可以避免权值问题

3、按钮写的太复杂,要计算好权值,点击色才不会被覆盖

最后再解释下为何会点击下去才变色,不知道各位有没有发觉,按钮点击下去后,多了一个名为button-hover的类名,这是动态修改的,按钮取消点击后,又会被自动取消掉,可以看看下面:


微信小程序按钮点击动画效果的实现

更新时间:2019年09月04日 10:51:41   作者:CodeHunter_qcy    我要评论

这篇文章主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

动画效果如下:

GIF看起来可能会有点卡

wxml


1

<view class="confirm bubble">确定</view>

wxss


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

.confirm{

 width: 325rpx;

 height: 80rpx;

 background: #07c160;

 border-radius: 6rpx;

 font-size: 30rpx;

 color: #fff;

 line-height: 80rpx;

 text-align: center;

 

}

.bubble{

 position: relative;

 overflow: hidden;

}

.bubble:after{

 content: "";

 background: #999;

 position: absolute;

 width: 750rpx;

 height: 750rpx;

 left: calc(50% - 375rpx);

 top: calc(50% - 375rpx);

 opacity: 0;

 margin: auto;

 border-radius: 50%;

 transform: scale(1);

 transition: all 0.4s ease-in-out;

}

.bubble:active:after {

 transform: scale(0);

 opacity: 1;

 transition: 0s;

}

总结

以上所述是小编给大家介绍的微信小程序按钮点击动画效果的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

原文地址:https://www.cnblogs.com/ioriwellings/p/12530734.html

时间: 2024-11-02 18:17:03

微信小程序按钮的相关文章

微信小程序按钮去除边框线,分享页面

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >

微信小程序按钮去除边框

wxml: <button class='share' id='{{item.id}}' open-type="share"> <image src='/img/fx.png' class='img_1'></image> </button> wxss: /* 按钮 */ .share{ width: 100rpx; height:50rpx; background: #fff; position:relative; margin-top

微信小程序添加悬浮在线客服会话按钮

微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话.那么如何自定义成悬浮客服会话按钮呢?随Z5Win一起来看看 1.我们可以定义contact-button的样式,加一个class.这个客服组件可以放在一个固定模板里,方便每个页面都调用到. <view> <contact-button class="img-plus-style

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮,还是有可能会重复调用的. 虽然这种情况有点极端,正常用户是不会这么连续快速的点击按钮的,但是也不能排除有用户手抖,连续点了两下.如果重复调用的话,不仅体验不好,单击事件中涉及到后端接口操作的也可能引起其他异常.所以这个问题还是要处理下的. 刚开始想到的是使用loading开启

微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理) 异常解析: 1. getPhoneNumber的使用: 对于 getPhoneNumber(OBJECT) API,由于小程序需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发(具体使用方法详见getP

微信小程序:实现悬浮返回和分享按钮

效果图: 数据: 依赖微信小程序接口wx.redirectTo.onShareAppMessage来完成 跳转接口: https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html?search-key=redirectTo 前端处理: 1.设置两个按钮 2.绑定对应的事件 wxml代码: css代码: ###js 代码: 代-码-下载:https://pan.baidu.com/s/1GYntkS83UadLjUY

第一个微信小程序(实现点击一个按钮弹出toast)

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

微信小程序开发——点击按钮退出小程序的实现

微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的:详情参考官方文档:navigator.示例代码:1 navigator open-type="exit" target="miniProgram"关闭小程序/navigator不过这个 ... 微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的: 详情参考官方文档:navigator. 示例代码: 不过这个功能最低支持版本时 2

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇