引言
在微信小程序开发中，实现用户交互的多样性是提升用户体验的关键之一。本文将详细介绍如何在微信小程序中实现点击圆圈小问号弹出注解（Tip）的功能。这种功能常见于帮助信息、提示说明等场景，能够为用户提供即时的帮助和反馈。
功能实现步骤
1. 界面效果图
2. 如何实现
先说思路 再谈实现
主要思路 是在最外层view添加点击事件,用来关闭提示框，点击小圆圈问号 在组件执行显示消息框 并在执行前抛出一个方法 关闭其他的w-tip组件（可能有多个tip组件 效果就是 点击其中一个 关闭其他已经点开的） 主要用到事件冒泡和事件捕获（按钮）控件呢 就是以小圆圈为中心 弹消息框 主要是样式
我把他封成微信小程序组件了 下面是使用方法
使用控件的地方
wxml
<view bindtap="handleTap">
<view>
<text > 订单（{{item.orderQuantity}}单）</text>
<dk-tip id="dk-tip1" Down="{{true}}" Right="{{true}}"
tipContent='数据来源：销售订单'
bind:clickTip="handleTap"></dk-tip>
</view>
</view>js
/**
* @desc : 关闭所有的tip
* @date :
* @author :
*/
handleTap(){
this.selectComponent('#dk-tip1').setShowTipFlag(false)
this.selectComponent('#dk-tip2').setShowTipFlag(false)
this.selectComponent('#dk-tip3').setShowTipFlag(false)
this.selectComponent('#dk-tip4').setShowTipFlag(false)
},
handleTap 就是全局 监听 关闭 所有tip组件
组件代码(就是以小圆圈为中心 弹消息框 主要是样式)
wxml:
<!-- 显示 tip 文字 -->
<view class="tipLayout">
<!-- 上右弹框 -->
<view wx:if="{{showTip && Up && Right}}" class="tipUpRight" >
<text>{{tipContent}}</text>
</view>
<!-- 上左弹框 -->
<view wx:if="{{showTip && Up && Left}}" class="tipUpLeft" >
<text>{{tipContent}}</text>
</view>
<!-- 带问号的小圆圈 -->
<view class="container">
<van-icon name="question-o" size="30rpx" catchtap="showTip" /> <!-- 添加size属性以控制图标大小（可选） -->
</view>
<!-- 下右弹框 -->
<view wx:if="{{showTip&&Down&&Right}}" class="tipDownRight" >
<text> {{tipContent}}</text>
</view>
<!-- 下左弹框 -->
<view wx:if="{{showTip&&Down&&Left}}" class="tipDownLeft" >
<text> {{tipContent}}</text>
</view>
</view>js
Component({
/**
* 组件的属性列表
*/
properties: {
showTip: { //是否显示tip
type: Boolean,
value: false
},
Up: { //显示的方位 上
type: Boolean,
value: false
},
Down: { //显示的方位 下
type: Boolean,
value: false
},
Left: { //显示的方位 左
type: Boolean,
value: false
},
Right: { //显示的方位 右
type: Boolean,
value: false
},
showTip: { //是否显示tip
type: Boolean,
value: false
},
tipContent: { //tip显示的内容
type: String,
value: ""
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
/**
* @desc : 显示tip
* @author :
* @date : 2024/4/25 11:46
*/
showTip(e) {
this.triggerEvent('clickTip', { })
this.setData({
showTip: true
})
},
setShowTipFlag(flag) {
this.setData({
showTip: flag
})
},
}
})css:
.tipDownRight {
min-height: 80rpx;
color: white;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8rpx 16rpx;
background: rgba(0, 0, 0, 0.7);
position: absolute;
/* 使用百分比或负值rpx，确保它完全在图标上方 */
transform: translateY(70%);
/* 另一个选项，使用transform以确保更精确的控制 */
left: 0;
/* 如果需要，可以调整或移除 */
border-radius: 12rpx;
width: max-content;
}
.tipDownRight:after {
content: "\00a0";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 8rpx;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
position: absolute;
z-index: 1;
top: -14rpx;
left: 10rpx;
}
.tipDownLeft {
min-height: 80rpx;
color: white;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8rpx 16rpx;
background: rgba(0, 0, 0, 0.7);
position: absolute;
/* 使用百分比或负值rpx，确保它完全在图标上方 */
transform: translateY(70%);
/* 另一个选项，使用transform以确保更精确的控制 */
right: 0;
/* 如果需要，可以调整或移除 */
border-radius: 12rpx;
width: max-content;
}
.tipDownLeft:after {
content: "\00a0";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 8rpx;
border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
position: absolute;
z-index: 1;
top: -14rpx;
right: 10rpx;
}
.tipUpRight {
min-height: 80rpx;
color: white;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8rpx 16rpx;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: -50%;
/* 使用百分比或负值rpx，确保它完全在图标上方 */
transform: translateY(-100%);
/* 另一个选项，使用transform以确保更精确的控制 */
left: 0;
/* 如果需要，可以调整或移除 */
border-radius: 12rpx;
width: max-content;
}
.tipUpRight:after {
content: "\00a0";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 8rpx;
border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
position: absolute;
z-index: 1;
bottom: -14rpx;
left: 10rpx;
}
.tipUpLeft {
min-height: 80rpx;
color: white;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 8rpx 16rpx;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: -50%;
/* 使用百分比或负值rpx，确保它完全在图标上方 */
transform: translateY(-100%);
/* 另一个选项，使用transform以确保更精确的控制 */
right: 0;
/* 如果需要，可以调整或移除 */
border-radius: 12rpx;
width: max-content;
}
.tipUpLeft:after {
content: "\00a0";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 8rpx;
border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
position: absolute;
z-index: 1;
bottom: -14rpx;
right: 10rpx;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.tipLayout {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
/* 或其他适当的高度 */
}
