精华内容
下载资源
问答
  • 小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。 本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。 去掉他对 button ...

    class 的样式优先级没有 app.json v2 高,导致被覆盖了

    第1中办法,去掉v2

    原因是这个导致的:
    在这里插入图片描述

    什么是 style:v2

    官方解释:

    微信客户端 7.0 开始,UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 “style”: "v2"可表明启用新版的组件样式。
    本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

    去掉他对 button 不影响,但是个人目前不知到对其它有没有影响!

    没去掉 v2
    在这里插入图片描述

    去掉 v2
    在这里插入图片描述
    样式改变了

    第2种办法,内置样式,style

    用style

    <button type="primary" style=" margin: 25rpx 15rpx 0 15rpx; border-radius: 40rpx;width: auto;" formType="submit">确认设置</button>
    

    第3中办法,提高样式优先级 !imporant

    wsxx

    .btnPrimary{
      margin: 25rpx 15rpx 0 15rpx !important; 
      border-radius: 40rpx;
      width: auto !important;
    }
    

    wxml

    <button type="primary" class="btnPrimary" formType="submit">确认设置</button>
    

    完美解决了这个问题,个人对去掉v2,不知会遇到什么问题,没有试过,毕竟是官方默认给我们加的,建议还是留着吧,你们说呢!

    展开全文
  • 转自https://www.cnblogs.com/fightjianxian/p/13786328.html 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 .login-btn { font-size: 16px; width: 100% !... border:1px soli

    转自https://www.cnblogs.com/fightjianxian/p/13786328.html

    方法1.

    样式中加入!important,即:width: 100% !important;

    wxss代码示例

    .login-btn {
        font-size: 16px;
        width: 100% !important;
        font-weight: 400;
        color: #fff;
        border-radius: 4px;
        border:1px solid rgba(254,50,50,1);
        background:linear-gradient(180deg,rgba(241,94,94,1) 0%,rgba(222,62,62,1) 100%);
    }
    

    wxml代码示例:

    <button class="login-btn" bindclick="login">登录</button>
    

    方法2.

    标签内,使用style

    wxml代码示例:

    <button class="login-btn" bindclick="login" style="width:100%">登录</button>
    

    方法3.

    删除app.json的配置"style": “v2”,不过这个不推荐

    展开全文
  • 记一个奇葩问题 最近做小程序碰到一个神奇的现象,页面上定义了一个按钮触发分享, 另外一个同级view标签处理别的事件。 但是点击view标签的时候却触发了分享操作。 wxml <view class="oprator flex"> <...

    记一个奇葩问题

    最近做小程序碰到一个神奇的现象,页面上定义了一个按钮触发分享,
    另外一个同级view标签处理别的事件。
    但是点击view标签的时候却触发了分享操作。

    wxml

    <view class="oprator flex">
      <button class="share-box" open-type="share">
          <image class="icon" src="/image/school-share.png" mode="aspectFill" />
          <text>分享</text>
        </button>
      <view class="delivery-box" bindtap="showPopup">
        <image class="icon" src="/image/delivery.png" mode="aspectFill" />
        <text>传递薪火</text>
      </view>
    </view>
    

    scss

    .share-box {
      color: #14cc76;
      width: 50%;
      text-align: center;
      background: none;
      border: 0;
      position: unset;
    
      .icon {
        width: 30rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
      .xhzx-form-button text {
        color: #14cc76;
        font-size: 32rpx;
      }
    }
    
    .delivery-box {
      color: #fe7141;
      width: 50%;
      text-align: center;
    
      .icon {
        width: 24rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
    

    遂在社区里搜了一下,发现两个帖子

    最后发现是按钮上的position属性导致的(删掉属性就正常了)、应该是官方的一个bug了。不知道为什么这么久了还没解决。

    展开全文
  • 记录一下我做微信小程序以来button

    记录一下我做微信小程序以来,button组件无法自定义样式的问题和其解决方法。小程序的button组件有其默认的样式,它默认的样式有时候不适合我们项目开发,所以我们需要自定义其样式。(源代码在文章结尾)

    wxss-----button修改样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    wxss-----calss修改样式
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    用class修饰与button直接修饰的主要区别为button直接修饰修改不了button组件的宽,能修改高;用class修饰则可以修改其宽高。

    wxss代码
    testBt:not([size='mini']){ display: flex; align-items: center; justify-content: center; background-color: red; margin-top: 15rpx; padding: 0rpx; width:200rpx; height:70rpx; border-radius: 40rpx; color: white; }.

    本人自己做了一个完整的图文分享、点赞、收藏云开发小程序,可以用来做毕业设计、图文分享项目,操作简单,利用腾讯免费赠送的云开发空间就可以完成所有操作,节省成本、方便快捷,当天就可以上线!
    链接:https://download.csdn.net/download/weixin_52658156/20238876

    展开全文
  • button class="btn" plain="true"></button> //添加plain属性 wxss: button[plain] { border:none; } 方法2: wxml: <button class="btn1">111</button> wxss: .btn1{ background-...
  • button>的属性open-type触发该功能。 按钮内有图片和文字 去掉padding和margin <button style="padding: 0; margin: 0;"> <image /> <view>分享</view> </button> 去掉图片...
  • button::after{ border: none; }
  • 最近才开始上手学习微信小程序开发,跟着视频的步骤去做一些小Demo居然也会翻车!这就让人很纳闷了。视频里面明明就是用了很简单的一个方法就能获取到用户的登录信息了 <button open-type="getUserInfo">获取...
  • 如图所示,当我们手指触摸了button文字所在的cell区域时,对应的区域底色变成浅灰色,这样用户就可以知道小程序是有及时响应他的这次触摸操作,用户就不会很迷惑。 /*page.wxss */ .hover{ background-color: ...
  • 小程序button登录能力

    2020-12-27 17:07:37
    当我们点击按钮时会显示 我们 先点击拒绝看下返回结果: 我们可以看到当我们点击拒绝的时候,就会发现 detail 里 有 errorMsg 我们再点击允许看看: 成功的时候有userInfo 对象 行,我们修改下我们的......
  • 通过给 button 组件设置属性open-type=“share...相关组件:button wxml: <view class="share" bindtap="share" > <image src="/static/img/icon_share02@2x.png"></image> <button open-typ
  • 在uni-app框架下适配头条小程序,给button组件设置圆角出现了以下现象: 按uni-app文档给button组件加上plain 在开发者工具中可以了,但真机上还是不行。 看了一下字体跳动小程序文档中对button组件的描述: ...
  • 一、按钮的默认样式// 默认样式button {position:relative;display:block;margin-left:auto;margin-right:auto;padding-left:14px;padding-right:14px;box-sizing:border-box;font-size:18px;text-align:center;text...
  • 小程序button默认有一个边框,使用border:none 并不能将其去除,给button的后伪元素设置 border:none才能去除 button::after{ border:none }
  • 这里写自定义目录标题小程序button授权组件不弹弹框,而且wx.getSetting获取不到用户授权信息 小程序button授权组件不弹弹框,而且wx.getSetting获取不到用户授权信息 原因是平台发布的小程序新版本,wx.getUserInfo...
  • button边框去除相信大家开发微信小程序时使用button会遇到一些与预期效果不同的样式问题。例如button的边框无法去除,在为button设置圆角的时候周围会有一些"杂质",像这样:边框的存在,使得显示效果并不理想我们来...
  • 方法一 直接在button按钮上写行内样式 (推荐使用) wxml代码示例 <button type="primary" style="width:100%"></button> 方法二 删除app.json的配置"style": "v2" 转载:...
  • button::after { border: none; // 设置为0 不可清除,为none }
  • https://www.jianshu.com/p/93d7104be420  .button-none { width: auto; margin: 0rpx; padding: 0rpx; line-height: auto; font-size: 16px; font-style: normal; border: none; border-radius: 0; ...
  • 小程序实现多button单选/多选红色为选中状态单选多选①wxss/* pages/button-select/button-select.wxss */.button_container{display: flex;flex-direction: row;justify-content: space-around}/* 按钮未选中 */....
  • button绑定id data-id <button class="shanchu" bindtap="shanchu" data-id="{{item._id}}">删除</button> js里删除函数 //删除 shanchu(e) { //获得绑定的商品id id = e.currentTarget.dataset.id...
  • button{ border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1; } button::after{ border:none; } .button-hover{ color:#000; background-color: rgb(247, 247, 247...
  • 问题: 微信小程序button按钮在wxss中定义宽度占比后无效 图片:
  • button按钮添加伪类::after .set-btn-chat::after{ border: none; }
  • 在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了。插入button按钮并保存后,便可以以预览界面看到一个原始的按钮。小程序样式修改默认没有对按钮设置任何样式时,按钮占用整个一行...
  • 1.下面我们会说到button组件的一些信息,关于button组件的一般属性我在这里就不详细... 1.contact:直接打开客服对话功能,需要在微信公众平台里配置,添加自己小程序的客服。这个功能且需要真机调试才能使用。 2....
  • 微信小程序清除 button按钮 的默认点击效果 在 button 中进行插入 hover-class=“none” 即可 在微信官方文档中有对于此项属性的详细解释
  • 1.微信小程序BUTTON常见属性: 2.BUTTON宽高等样式的有效调整方法: 微信小程序当中通过wxss来设置button的宽高值并不起效果,而size属性却只有两个合法值,当我们想要自定义大小时则: 在 标签中直接写 style...
  • 很多人开发小程序的时候,会因为button难看的样式而烦恼 // 去除默认样式 button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:...
  • .button{ border: none; border-color: transparent; background: none!important; } .button::after{ border: none; background: none!important; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 246,492
精华内容 98,596
关键字:

小程序button

友情链接: periph_uart_rb.rar