微信小程序圖標(biāo)的角標(biāo)實(shí)現(xiàn)代碼

更新時(shí)間：2025年06月19日 10:04:50 作者：lanyu96

文章介紹微信小程序中實(shí)現(xiàn)圖標(biāo)角標(biāo)和可拖動(dòng)懸浮圖標(biāo)的方法,通過(guò)view控件定位樣式,提供WXML/WXSS代碼示例,感興趣的朋友跟隨小編一起看看吧

微信小程序圖標(biāo)的角標(biāo)實(shí)現(xiàn)

先上效果圖

實(shí)現(xiàn)原理就是一個(gè)view控件設(shè)置成類似于圖中的樣式，然后再固定在圖標(biāo)的右上方，原理比較簡(jiǎn)單，下面貼上需要的代碼。

wxml：

          <form bindsubmit="這是圖標(biāo)點(diǎn)擊事件" report-submit="true">                
                <button class="iconBtn" form-type="submit">
                    <view class="remind-num" ">
                        12
                    </view>
                    <image class="icon-img" src="{{這是圖標(biāo)圖片的url}}">
                    </image>
                    <view class="icon-text-view">這是圖標(biāo)</view>
                </button>
           </form>

wcss：

iconBtn{
    width: 100%;
    height: 130rpx;
    background: rgba(155, 155, 155, 0);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.iconBtn::after{
    border: none;
}
.remind-num{
	border-radius: 40%;
	position: absolute;
	top: 2rpx;
	right: 2rpx;
	font-size: 20rpx;
	/*padding: 4rpx 15rpx;*/
	/*align-items: center;*/
	text-align: center;
	width: 50rpx;
	line-height: 30rpx;
	height: 30rpx;
	color: var(--white);
	z-index: 100;
	background-color: rgba(221, 81, 76, 0.77);
}
.icon-img{
    margin-top: 10rpx;
    width: 65rpx;
    height: 65rpx;
}

補(bǔ)充：微信小程序：實(shí)現(xiàn)可拖動(dòng)懸浮圖標(biāo)（包括按鈕角標(biāo)的實(shí)現(xiàn)）

微信小程序：實(shí)現(xiàn)可拖動(dòng)懸浮圖標(biāo)（包括按鈕角標(biāo)的實(shí)現(xiàn)）

微信小程序：實(shí)現(xiàn)可拖動(dòng)懸浮圖標(biāo)

在制作商城類微信小程序的過(guò)程中，我們經(jīng)常會(huì)碰到需要增加可拖動(dòng)懸浮圖標(biāo)的情況，本文簡(jiǎn)單的介紹一下可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)。

運(yùn)行截圖：

主要代碼：

var startPoint
Page({
  data: {
    //按鈕位置參數(shù)
    buttonTop: 0,
    buttonLeft: 0,
    windowHeight: '',
    windowWidth: '',
    //角標(biāo)顯示數(shù)字
    corner_data:0,
  },
  onLoad:function(){
    //定義角標(biāo)數(shù)字
    this.setData({
      corner_data:3
    })
    // 獲取購(gòu)物車控件適配參數(shù)
    var that =this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        // 屏幕寬度、高度
        console.log('height=' + res.windowHeight);
        console.log('width=' + res.windowWidth);
        // 高度,寬度 單位為px
        that.setData({
          windowHeight:  res.windowHeight,
          windowWidth:  res.windowWidth,
          buttonTop:res.windowHeight*0.70,//這里定義按鈕的初始位置
          buttonLeft:res.windowWidth*0.70,//這里定義按鈕的初始位置
        })
      }
    })
  },
  //可拖動(dòng)懸浮按鈕點(diǎn)擊事件
  btn_Suspension_click:function(){
    //這里是點(diǎn)擊購(gòu)物車之后將要執(zhí)行的操作
    wx.showToast({
      title: '點(diǎn)擊成功',
      icon:'success',
      duration:1000
    })
  },
  //以下是按鈕拖動(dòng)事件
  buttonStart: function (e) {
    startPoint = e.touches[0]//獲取拖動(dòng)開(kāi)始點(diǎn)
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1]//獲取拖動(dòng)結(jié)束點(diǎn)
    //計(jì)算在X軸上拖動(dòng)的距離和在Y軸上拖動(dòng)的距離
    var translateX = endPoint.clientX - startPoint.clientX
    var translateY = endPoint.clientY - startPoint.clientY
    startPoint = endPoint//重置開(kāi)始位置
    var buttonTop = this.data.buttonTop + translateY
    var buttonLeft = this.data.buttonLeft + translateX
    //判斷是移動(dòng)否超出屏幕
    if (buttonLeft+50 >= this.data.windowWidth){
      buttonLeft = this.data.windowWidth-50;
    }
    if (buttonLeft<=0){
      buttonLeft=0;
    }
    if (buttonTop<=0){
      buttonTop=0
    }
    if (buttonTop + 50 >= this.data.windowHeight){
      buttonTop = this.data.windowHeight-50;
    }
    this.setData({
      buttonTop: buttonTop,
      buttonLeft: buttonLeft
    })
  },
  buttonEnd: function (e) {
  }
})

wxml:

<!--可拖動(dòng)按鈕控件表-->
<!--buttonStart和buttonEnd一定不能用catch事件，否則按鈕點(diǎn)擊事件會(huì)失效-->
<view class="btn_Suspension" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;">
    <image class="Suspension_logo" src="../images/Suspension.png"></image><!--這里是按鈕圖標(biāo)，下載地址會(huì)在文章底部說(shuō)明-->
    <view wx:if="{{corner_data==0}}"></view>
    <view wx:else>
      <view class="cornorMark">
        <text>{{corner_data}}</text>
      </view>
    </view>
  </view>

wxss：

Page{
 background: #f5f5f5;
}
/**可拖動(dòng)懸浮按鈕樣式表**/
.btn_Suspension{
  position: fixed;
  height: 100rpx;
  width: 100rpx;
  background-color: rgba(255, 255, 255, 0.755);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  box-shadow: 1px 0px 1px 1px #ede7e7;
}
.Suspension_logo{
  position:absolute;
  height:50%;
  width:50%;
  left:23%;
  top:27%
}
.cornorMark{
  position:absolute;
  background: rgb(242, 109, 38);
  border:1px solid rgb(242, 109, 38);
  border-radius: 100px;
  width:30rpx;
  height:30rpx;
  top:-17rpx;
  right:3rpx;
  color:#fff;
  font-size: 12px;
  text-align: center;
}
.cornorMark text{
  position:absolute;
  width:100%;
  left:0%;
  text-align: center;
  top:-1px;
}

圖標(biāo)素材下載地址：