setTabBarBadge在非tabBar页面设置

本文主要是介绍setTabBarBadge在非tabBar页面设置，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

不支持，需要在tabBar栏操作。

可以换种思路，在本页面遮罩层实现业务逻辑，这样没有离开tabBar页面，就可以操作setTabBarBadge。

wxml 添加到主页面最下面即可

<!-- 遮罩层 -->
<!-- <view class="shadow" wx:if="{{chooseSize}}" bindtap='hideModal'></view> -->
<!-- 上滑高度 -->
<view class='choosen' wx:if="{{chooseSize}}" animation='{{animationData}}'><!-- 内容 --><view class="container-box"><view class="close"><image src="/images/close.png" bindtap="hideModal"></image></view><view class="picture"><image src="{{detail.imageUrl}}"></image></view><view class="detail_leg"><view class="dish">{{detail.name}}</view><view class="Sold">已售{{detail.number}}份</view><view class="price"><text>￥{{detail.real}}</text><text style="font-size: 20rpx;text-decoration: line-through;color:#000;">￥{{detail.price}}</text><image src="/images/add.png" data-id="{{detail.id}}" bindtap="detailAddCarts"></image></view></view></view>
</view>

wxss 

/*弹窗*/
/* .shadow{width: 100%;height: 200%;z-index: 80;position: absolute;top: 0;background-color: #000;opacity: 0.5;
} */
/* 上滑高度 */
.choosen{width: 100%;height: 100%;position: fixed;bottom: 0;background-color: #fff;/* border-top-left-radius: 20rpx;border-top-right-radius: 20rpx; */z-index: 98;
}/* 内容 */
.container-box {display: flex;height: 100%;flex-direction: column;width: 100%;border-radius: 15rpx;margin: 0 auto;z-index: 98;
}.close{position: fixed;right: 30rpx;top: 30rpx;
}
.close image{height: 60rpx;width: 60rpx;
}.picture{height: 60%;width: 100%;}
.picture image{height: 100%;width: 100%;
}.dish{font-size: 48rpx;font-weight: bold;
}
.Sold{margin-top: 10rpx;font-size: 20rpx;
}
.price{margin-top: 10rpx;color: red;
}
.price image{height: 50rpx;width: 50rpx;position: fixed;right: 40rpx;
}

js

 detailAddCarts: function (event) {let productId = this.data.productIdconsole.log(this.data);let product = this.data.products.find(element => element.id == productId); //根据id获取商品数据// let product = this.data.products.find(detail); //根据id获取商品数据console.log(product)//检测购物车中是否已经存在某个商品if (this.data.carts.includes(product)) {this.data.carts.find(element => element.id == productId).count++; //不添加商品，直接数量加1} else {this.data.carts.push(product); //添加商品}app.globalData.carts = this.data.carts;console.log(app.globalData.carts);wx.setTabBarBadge({index: 2,text: app.globalData.carts.length.toString()})},//商品详情页是上滑showshadow: function(e) {let productId_detail = e.currentTarget.dataset.id; //获取商品idlet product_detail = this.data.products.find(element => element.id == productId_detail); //根据id获取商品数据console.log(product_detail)var _that = this;_that.setData({detail: product_detail,productId: productId_detail,})if (this.data.chooseSize == false) {this.chooseSezi()} else {this.hideModal()}},// 动画函数chooseSezi: function(e) {// 用that取代this，防止不必要的情况发生var that = this;// 创建一个动画实例var animation = wx.createAnimation({// 动画持续时间duration: 400,// 定义动画效果，当前是匀速timingFunction: 'linear'})// 将该变量赋值给当前动画that.animation = animation// 先在y轴偏移，然后用step()完成一个动画animation.translateY(1000).step()// 用setData改变当前动画that.setData({// 通过export()方法导出数据animationData: animation.export(),// 改变view里面的Wx：ifchooseSize: true})// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间setTimeout(function() {animation.translateY(0).step()that.setData({animationData: animation.export(),clearcart: false})}, 100)},// 隐藏hideModal: function(e) {var that = this;var animation = wx.createAnimation({duration: 400,timingFunction: 'linear'})that.animation = animationanimation.translateY(700).step()that.setData({animationData: animation.export()})setTimeout(function() {animation.translateY(0).step()that.setData({animationData: animation.export(),chooseSize: false})}, 500)}

 

这篇关于setTabBarBadge在非tabBar页面设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---