微信小程序开发--点击圆圈小问号弹注解tip 点击其他区域关闭(组件 w-tip 弹框在小圆圈的 上下左右 可以自己控制 )

引言

在微信小程序开发中,实现用户交互的多样性是提升用户体验的关键之一。本文将详细介绍如何在微信小程序中实现点击圆圈小问号弹出注解(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%;/* 或其他适当的高度 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言迷宫

目录 开头程序程序的流程图程序输入与输出的效果结尾 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我要来看我用C语言编译出来的迷宫游戏。 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <Windows.h> void printmaze(char s…

若依前后端获取当前用户

后端 Autowired private TokenService tokenService;LoginUser loginUser tokenService.getLoginUser(); sysInquiry.setCreateBy(loginUser.getUsername()); sysInquiry.setCreateTime(DateUtils.getNowDate()); 前端 获取使用 const nickName this.$store.state.user.nick…

每日OJ_牛客_DD5 进制转换

目录 牛客_DD5 进制转换 解析代码 牛客_DD5 进制转换 进制转换_牛客题霸_牛客网 解析代码 本题题目很简单&#xff0c;题目的本意就是将10进制的数转换成N进制。N(2 ≤ N ≤ 16)可以看出进制最多可以到16进制。 首先想清楚原理&#xff1a;N进制数&#xff0c;每个进制位的值…

【Js】获取当前日期时间

日期基本数据&#xff1a; var myDate new Date(); //Date 对象会自动把当前日期和时间保存为其初始值 myDate.getYear(); //返回当前年份(2位)&#xff1b;请使用 getFullYear() 方法代替 myDate.getFullYear(); //返回完整的年份(4位,1970-????) myDate.getMonth();…

Hands-On 基于 Flagchip FC7300 MCAL-PWM 驱动 RGB

本文将详细介绍如何使用 EB 工具配置 Flagchip FC7300 MCAL PWM 驱动 RGB&#xff0c;并重点强调了配置 pwm 模块的过程以及对pwm 模块的详细解释。本次示例演示将会使用 FTU1_CH1、FTU1_CH3、 FTU1_CH5 通道来驱动 RBG 灯点亮。 查看原文请点此&#xff1a; 硬件平台&…

STM32测测速---编码电机读取速度的计算

1、首先先了解一下计算的公式 速度计算&#xff1a; 轮胎每转一圈的脉冲数取决于编码器的分辨率&#xff0c;可由下面公式进行计算&#xff1a; PPR是电机的线数 以GA25-370电机为例。 图片来源&#xff1a;第四节&#xff1a;STM32定时器&#xff08;4.JGA25-370霍尔编码器…

XGBoost算法—Python实现

XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一个优化的分布式梯度增强库&#xff0c;旨在实现高效、灵活和便携的机器学习算法。以下是关于XGBoost的详细解析&#xff1a; 一、定义与背景 定义&#xff1a;XGBoost是一个在梯度提升&#xff08;Gradient Boo…

【Linux网络】套接字编程

本篇博客整理了 socket 套接字编程的相关内容&#xff0c;包括 socket 网络通信原理、socket 相关的系统调用接口等&#xff0c;分别演示了基于UDP协议、TCP协议的 socket 网络编程&#xff0c;旨在让读者更加深入理解网络通信原理和设计&#xff0c;对网络编程有初步的认识和掌…

OpenAI发布“最具性价比”模型 GPT-4o mini,GPT-3.5 Turbo 已成过去式

GPT-4o mini 相较于 GPT 3.5 在多个方面实现了显著的性能提升&#xff1a; 得分率提升&#xff1a;GPT-4o mini 在 MMLU&#xff08;一个涉及多种语言理解任务的基准测试&#xff09;上的得分率为 82%&#xff0c;优于 GPT-4&#xff0c;并且明显高于 GPT-3.5 2。 成本效益&am…

SpringBoot3 + Vue3 学习 Day 1

springboot 基础 和 注册接口的开发 学习视频基础SpringBoot 概述快速启动配置文件基本使用① application.properties② application.yml &#xff08;更好&#xff09; yml 配置信息的书写和获取yml 配置信息书写与获取 1 - Valueyml 配置信息书写与获取 2 - ConfigurationPr…

docker的学习(二):docker常用的高级技术总结

简介 docker的一些知识点的总结 UnionFS 分层&#xff0c;轻量级&#xff0c;高性能的文件系统&#xff0c;支持一层层的叠加功能来修改文件系统。 一次同时加载多个文件系统&#xff0c;把各层文件系统叠加起来&#xff0c;最终文件系统会包含所有底层的文件和目录&#xf…

大数据-38 Redis 高并发下的分布式缓存 Redis简介 缓存场景 读写模式 旁路模式 穿透模式 缓存模式 基本概念等

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBaseRedis 章节内容 上一节我们完成了&#xff1a; HBase …

独立看门狗IWDG

一&#xff0c;独立看门狗的讲述 独立看门狗&#xff08;Independent Watchdog&#xff0c;通常缩写为IWDG&#xff09;主要作用是主要用于检测外界电磁干扰&#xff0c;或硬件异常导致的程序跑飞问题。 1.1 IWDG本质上是一个12位的递减计数器。当计数器的值从某个初始…

C语言编译报错:error: expected declaration or statement at end of input(缺了括号)

文章目录 报错信息分析解决步骤&#xff1a; 排查 报错信息 /userdata/testOtherPrj/20240715_box_circuit_breaker/test/external/modbus_vendorA/src/vendor_a_modbus.c: In function ‘VendorA_PowerStop’: /userdata/testOtherPrj/20240715_box_circuit_breaker/test/exte…

PyQT6---环境搭建

1、虚拟环境搭建 创建虚拟环境 create -n pyqt6_39 python3.9 切换虚拟环境 conda activate pyqt6_39 2、安装pyqt6 安装pyqt6和pyqt6-tools pip install PyQt6 -i https://pypi.tuna.tsinghua.edu.cn/simplepip install pyqt6-tools -i https://pypi.tuna.tsinghua.edu.cn/…

【视语】XR轻量级开发视语(DZRT)技术

视语&#xff08;DZRT&#xff09;技术介绍目录 视语&#xff08;DZRT&#xff09;介绍 智慧变焦技术 射线追踪技术 一、基本原理 二、实现步骤 三、优化技术 智能框架技术 一、智能框架技术概述 二、智能框架技术的特点 三、应用前景 网格碰撞体优化 1. 使用合适的…

如何采集1688店铺联系方式?

如何获取1688采集店铺联系方式&#xff1f;用大镜山阿里1688商家数据采集软件&#xff0c;打开如下图的窗口&#xff0c;输入采集的关键词&#xff0c;再点“开始采集”和“获取手机”即可。 等待采集完成即可&#xff01; 点”导出“&#xff0c;即可把采集结果导出。 如果需…

策划人如何写一个好的活动策划?

在营销界摸爬滚打十多年&#xff0c;我深刻体会到&#xff0c;策划一场成功的活动就像是烹饪一道美味的大餐。 你需要精心挑选食材&#xff08;活动元素&#xff09;、掌握火候&#xff08;时间控制&#xff09;、调配佐料&#xff08;创意和细节&#xff09;&#xff0c;最终…

Vue3+.NET6前后端分离式管理后台实战(三十)

1&#xff0c;Vue3.NET6前后端分离式管理后台实战(三十)

2024年软考复习策略

针对考试的难点&#xff0c;我们应该如何有效应对&#xff1f;面对这种通过率低、知识覆盖广的考试&#xff0c;选择合适的复习策略和优秀的老师至关重要。 以下是一些建议&#xff1a; 首先&#xff0c;在选择教师方面&#xff0c;推荐选择那些实战经验丰富、能精准把握重点…