引言
在微信小程序开发中，实现用户交互的多样性是提升用户体验的关键之一。本文将详细介绍如何在微信小程序中实现点击圆圈小问号弹出注解（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: { //是否显示tiptype: Boolean,value: false},Up: { //显示的方位 上type: Boolean,value: false},Down: { //显示的方位 下type: Boolean,value: false},Left: { //显示的方位 左type: Boolean,value: false},Right: { //显示的方位 右type: Boolean,value: false},showTip: { //是否显示tiptype: 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%;/* 或其他适当的高度 */
}
