微信小程序修改样式效果怎么实现?

　　微信小程序修改样式效果怎么实现?一个好看的微信小程序样式可以吸引更多的微信小程序用户哦，各位微信小程序开发者，你可以实现点击修改微信小程序样式的效果，以下的全部内容供各位亲们参考。

　　微信小程序修改样式怎么做?

　　如果想要实现微信小程序点击修改样式的效果，你可以这样做!

　　小程序的button改变与其type属*有关，其默认的三个属*是：default’, ‘primary’, ‘warn’，其中default’是灰色的属*，而primary是蓝色，warn是红色，他们这个颜色是不能改变的。

　　   button1

　　   button2

　　   button3

　　   button4

　　可以看到这三种属*的button的class名都为Btn，

　　当给Btn设置background-color时，发现只有无type的背景颜色变了，(这个其实挺坑的,一个月前当时是default属*才能改变颜色,这才多久就改了,小程序还在成长,技术不能写死,说不定哪次就改动了)

　　   .Btn{margin-top:10px;background-color:yellow;}

　　            button1

　　            button2

　　            button3

　　在wxss中设置button-hover为改变其点击态的小程序样式，点击态样式目前我只发现在无type属*时才能生效：

　　   点击

　　   .btn-hover ：{background-color: pink;}

　　而other-button-hover是比button-hover优先级高的，比如同时设置background-color，会出现.other-button-hover设置的效果，当然这也是在无type属*时生效，

　　   点击

　　   .button-hover{background: black;}

　　此时点击态样式为黑色

　　   点击

　　   .button-hover{background: black;}

　　   .btn-hover{background-color: blue;}

　　此时点击态样式为蓝色

　　注意：.button-hover是默认的，不用再wxml中添加class，而。other-button-hover需要在wxml中添加class名hover-class，这是他们点击态的样式。

　　需要的微信小程序代码如下：

　　function IsTel(s){

　　if(s!=null) {

　　var length = s.length;

　　if(length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|)+d{8})$/.test(s) )

　　{

　　return true;

　　}else{

　　return false;

　　}

　　}

　　}

　　Page({

　　data:{

　　disabled:true, //是否可用

　　opacity:0.4, //设置透明度

　　},

　　//小程序跳转注册小程序页面

　　gotoRegist:function(){

　　wx.redirectTo({url: '../../pages/login/regist/regist'})

　　},

　　//手机的输入框

　　phone:function(e){

　　var that = this

　　//console.log(e.detail.value)

　　var isTel = IsTel(e.detail.value)

　　//console.log(isTel)

　　if(isTel){

　　that.setData({

　　disabled:false,

　　opacity:1

　　})

　　}else{

　　that.setData({

　　disabled:true,

　　opacity:0.4

　　})

　　}

　　},

　　//提交小程序按钮确认

　　sumit:function(e){

　　console.log(e.detail.value)

　　if(e.detail.value.passworld.length==0){

　　wx.showModal({

　　title: '密码不得为空',

　　showCancel:false

　　})

　　}else{

　　//提交

　　以上是　微信小程序修改样式效果怎么实现的方法了哦，大家赶快去设置吧，如果你设置好了，那么为小程序用户只用点击一下，就可以切换样式哦，是不是觉得很神奇呢?请多多关注微小乔哦。

相关推荐：

小程序修改button样式怎么设置？

微信小程序搜索框样式怎么开发？

小程序按钮点击样式实现步骤