微信小程序悬浮按钮

微信小程序 专栏收录该内容
10 篇文章 1 订阅

 

    在微信小程序开发过程中,我们一般会使用到类似android一样的布局,在页面的右下方固定一个悬浮。那么下面就简单讲解下如何具体的实现。

      

先上下效果图,这边可以看到右下方有个固定的悬浮按钮。设置一下图片的位置就可以实现这个效果了。

 

 

//wxss代码

.add_icon{

  position: fixed;

  width:42px;

  height:42px;

bottom: 30px;

right: 20px;

}

 

//wxml代码

<view bindtap='adddetial'>

      <image class="add_icon" src="../../image/addicon.png"></image>

  </view>


 

//JS代码

  adddetial: function () {

    wx.navigateTo({

      url: '../adddetial/adddetial',

      success: function (res) { },

      fail: function (res) { },

      complete: function (res) { },

    })

  },

 

好了,到这边就基本完成了,主要是一个position的设置哦!

 

Tip:实际项目中使用建议使用rpx代替px,1px大约是2rpx~

 

 

 

  • 12
    点赞
  • 5
    评论
  • 37
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值