精华内容
下载资源
问答
  • 微信小程序 按钮

    2019-11-28 15:55:06
    微信小程序按钮 写小程序按钮使用button时发现:无论如何设置button宽高,都是无效的,即使外面套一层view发现按钮高度也还是无法改变,况且样式还是腾讯的绿色,无法满足美观性,于是可以这样: .WXML文件 <...

    微信小程序按钮

    写小程序按钮使用button时发现:无论如何设置button宽高,都是无效的,即使外面套一层view发现按钮高度也还是无法改变,况且样式还是腾讯的绿色,无法满足美观性,于是可以这样:

    • .WXML文件
     <view class='point-item-right'>
            <view class='bx_btn' hover-class="bx_btn_click" bindtap='bxClick'>报 修</view>
          </view>
    
    • WXSS
    .bx_btn {
      width: 150rpx;
      height: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background: #337AB7;
      opacity: 0.6;
      border: 1px solid#d0d0d0;
      border-radius: 20rpx;
      font-size: 14px;
    }
    
    .bx_btn_click {
      color: white;
      background: #ec9f10;
    }
    
    

    这样就可以自行设置按钮外观和点击效果了

    新加一种,这样也可以实现按钮效果
    .wxml

     <navigator url="../order/order?Id={{item.id}}" class="btn">详情</navigator>
    

    .wxss

    .btn {
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 14px;
      border-radius: 60rpx;
      border: 1px solid 337AB7;
      color: #337AB7;
    }
    
    展开全文
  • 本文主要介绍微信小程序实现按钮滑动的方法,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下,希望能帮助到大家。微信小程序 按钮滑动的实现方法一.先看东西滑动前滑动后二.再上代码index.wxml发送...

    本文主要介绍微信小程序实现按钮滑动的方法,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下,希望能帮助到大家。

    微信小程序 按钮滑动的实现方法

    一.先看东西

    1ebc91dba449ac6adaed798dbe65b8a5.png

    滑动前

    f5eed00163b7b1c1a499d0662ebfa173.png

    滑动后

    二.再上代码

    index.wxml

    发送

    index.wxss

    .content {

    margin-top: 100rpx;

    font-size: 24rpx;

    }

    .sliderContent{

    position: relative;

    margin: 0 auto;

    margin-bottom: 50rpx;

    padding-left: 60rpx;

    width: 425rpx;

    box-sizing: border-box;

    height: 70rpx;

    line-height: 70rpx;

    border-radius: 60rpx;

    background-color: #fff;

    color: #289adc;

    box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);

    }

    .sliderContent input {

    line-height: 70rpx;

    height: 70rpx;

    box-sizing: border-box;

    padding-left: 40rpx;

    width: 250rpx;

    }

    .input-placeholder {

    text-align: center;

    color: #289adc;

    }

    .slider {

    position: absolute;

    top: 0;

    left: 0;

    width: 150rpx;

    border-radius: 60rpx;

    text-align: center;

    background-color: #7f7f7f;

    color: #fff;

    box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);

    }

    index.js

    Page({

    data: {

    moveStartX: 0, //起始位置

    moveSendBtnLeft: 0, //发送按钮的left属性

    moveEndX: 0, //结束位置

    screenWidth: 0, //屏幕宽度

    moveable: true, //是否可滑动

    disabled: true,//验证码输入框是否可用,

    SendBtnColor: "#7f7f7f" //滑动按钮颜色

    },

    onLoad: function () {

    var that = this;

    // 获取屏幕宽度

    wx.getSystemInfo({

    success: function (res) {

    that.setData({

    screenWidth: res.screenWidth

    })

    },

    })

    },

    // 开始移动

    moveSendBtnStart: function (e) {

    if (!this.data.moveable) {

    return;

    }

    console.log("start");

    console.log(e);

    this.setData({

    moveStartX: e.changedTouches["0"].clientX

    })

    },

    //移动发送按钮

    moveSendBtn: function (e) {

    if (!this.data.moveable) {

    return;

    }

    var that = this;

    // console.log(e.touches[0]);

    var left = ((e.touches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))

    console.log(left)

    if (left <= 275.5) {

    this.setData({

    moveSendBtnLeft: left

    })

    } else {

    this.setData({

    moveSendBtnLeft: 275.5

    })

    }

    },

    // 结束移动

    moveSendBtnEnd: function (e) {

    console.log("end");

    var that = this;

    var left = ((e.changedTouches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))

    console.log(left);

    if (left < 275.5) {

    for (let i = left; i >= 0; i--) {

    that.setData({

    moveSendBtnLeft: i

    })

    }

    } else {

    that.setData({

    moveEndX: e.changedTouches[0].clientX,

    moveable: false,

    disabled: false,

    SendBtnColor: "#289adc"

    })

    }

    }

    })

    三.顺便说说

    1.按钮滑动事件

    bindtouchstart //按钮开始滑动

    bindtouchend //按钮结束滑动

    bindtouchmove //按钮正在滑动

    在按钮开始滑动是记录开始的位置

    滑动结束时要判断按钮是否已经滑动到最右侧,如果只滑动到中间,则弹回

    滑动过程中要计算与初始位置的距离,然后计算并改变button的left属性值

    2.按钮滑动的距离计算

    因为滑动事件返回的数值都是以px作为单位,而我们在界面设计时使用的是rpx,在这里我们要进行数值计算,在onLoad中,我们获取到当前设备的宽度,rpx作为单位时,认为当前设备的逻辑宽度为750rpx,假设屏幕实际宽度为400px,那么1px = 400/750 rpx,那么滑动的距离 = 实际互动距离 / (400/750) rpx

    经过换算后,我们就可以得到以rpx作为单位的滑动距离。

    相关推荐:

    展开全文
  • 主要介绍了微信小程序 按钮滑动的实现方法的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下
  • 主要介绍了微信小程序按钮去除边框线分享页面功能,文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 主要介绍了微信小程序按钮点击跳转页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 发现微信小程序直接使用这个属性去掉边框失效 border: none; 经过检查发现 然后使用如下代码即可 .button[plain] { border: none; }

     发现微信小程序直接使用这个属性去掉边框失效

    border: none;

    经过检查发现

     

     然后使用如下代码即可

    .button[plain] {
      border: none;
    }

     

    展开全文
  • 微信小程序按钮点击动画

    千次阅读 2019-05-29 12:04:32
    微信小程序按钮点击动画 GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; ...

    微信小程序按钮点击动画

    在这里插入图片描述
    GIF看起来可能会有点卡

    wxml

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

    wxss

    .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;
    }
    
    
    
    
    展开全文
  • 微信小程序按钮失效的几大原因

    万次阅读 2019-07-04 19:17:09
    微信小程序按钮失效的几大原因(里面有大坑)
  • 2.3.1微信小程序按钮组件:button

    千次阅读 2017-04-22 11:32:44
    微信小程序按钮组件:button 按钮组件。 属性名 类型 默认值 说明 最低版本 size String default 按钮的大小   type String default 按钮的样式类型   plain Boolean fal
  • 微信小程序按钮悬浮固定在底部

    千次阅读 2018-12-12 17:16:00
    微信小程序按钮悬浮固定在底部   其实这是一个很简单的小程序的样式,也就随手记录下来了。 &lt;button class='Scancode' bindtap='getScancode'&gt;绑定车辆&lt;/button&gt; wxss: ....
  • 微信小程序按钮选中(单选,多选) <view wx:for="{{testList}}" wx:key="{{item}}" class="operationButton"> <button data-value="{{item}}" class="{{index==clickindex[index]?'clickbutton':'...
  • 微信小程序按钮固定在底部遇到的BUG
  • 微信小程序 按钮字体设置

    千次阅读 2019-09-04 14:11:39
    最近在做微信小程序,发现按钮默认的字体大小跟UI出来的图还是有差异的,所以把相关代码贴出来; background-color属性是修改背景颜色的,color是修改字体颜色的, 这里注意:如果<button></button>...
  • 微信小程序为例,其他原理相同 效果图 wxml <button bindtap="getBangDing" disabled="{{buttonShow}}" type="primary">绑定用户({{buttonTime}})</button> js js data buttonShow:'false', button...
  • 最近在学uni-app,顺便自己写个小程序。 左上角放了个button,可边框怎么也去不掉… 原来微信小程序按钮要去掉边框要这么写。。。
  • <button class="button_ji" style="width:90px;font-size: 10pt !important;" bindtap="video" data-item="{{item}}">...因为微信有默认按钮样式,所以要根据优先级进行修改,直接利用嵌入式样式修改 ...
  • http://www.hehaibao.com/wechat-button-get-userinfo/微信小程序如何按钮授权获取用户信息 https://blog.csdn.net/dabao87/article/details/81367276 微信登录授权 https://www.cnblogs.com/xyyt/p/9513467.html...
  • 微信小程序按钮控件设置呈现效果

    千次阅读 2020-03-10 14:56:02
    小程序中完成上述布局,需要设置四个按钮位置,控制每个按钮大小、设置按钮背景颜色,设置标题和图标的位置。 2、代码说明 2.1 index.wxml <view class="block"> <!--呈现标题--> <view ...
  • <view class="date-down" style="white-space:pre-line"> <view wx:for="{{list}}" wx:for-item="dayItem" class="day-button"> <view class="weui-cell__hd" style="position: relative">...
  • 微信小程序按钮背景使用本地图标

    千次阅读 2018-05-07 18:03:00
    RT ,微信小程序button使用本地图片, 官方有提示不支持,得用网络图片或者base64.首先,这个问题主要是针对界面上有分享功能的按钮。 否则一般的可以使用image控件展示图片,添加点击事件。对于分享功能,要么是右...
  • uni-app中微信小程序按钮无法获取用户信息,出现“GetUserInfo is not a function”错误。【学习日记】 如果大家是uni-app的初学者,那么开发uniapp多端应用时,那么就会接触到微信小程序运行时,需要授权的这么一...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,652
精华内容 1,860
关键字:

微信小程序按钮

微信小程序 订阅