R524809
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
Component({
|
|
options: {},
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
show: false, // 是否显示Tip
|
|
top: 0, // Tip距离顶部的距离
|
|
right: 0, // Tip距离右侧的距离
|
|
arrowRight: 0, // 箭头距离右侧的距离
|
|
},
|
|
/**
|
|
* 组件生命周期
|
|
*/
|
|
lifetimes: {
|
|
attached() {
|
|
// 检查用户是否已关闭过Tip
|
|
const tipClosed =
|
|
wx.getStorageSync('addToMiniprogramTipClosed') || false;
|
|
|
|
// 如果用户未关闭过，则显示Tip
|
|
if (!tipClosed) {
|
|
this.setData({
|
|
show: true,
|
|
});
|
|
}
|
|
|
|
// 获取胶囊按钮位置信息
|
|
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
|
|
const windowInfo = wx.getWindowInfo();
|
|
console.log('windowInfo', windowInfo);
|
|
console.log('menuButtonInfo', menuButtonInfo);
|
|
// 计算Tip的位置
|
|
// Tip应该在胶囊按钮下方，箭头向上指向胶囊按钮
|
|
const top = 10; // 胶囊按钮下方20px
|
|
const right = windowInfo.windowWidth - menuButtonInfo.right; // 距离右侧的距离，与胶囊按钮右对齐
|
|
|
|
// 计算箭头位置：箭头应该指向胶囊按钮的中心
|
|
// 胶囊按钮中心相对于Tip内容区域的右侧位置
|
|
const capsuleCenterX = menuButtonInfo.left + 28;
|
|
const tipRightEdge = windowInfo.windowWidth - right;
|
|
const arrowRight = tipRightEdge - capsuleCenterX; // 箭头距离Tip右侧的距离
|
|
|
|
this.setData({
|
|
top: top,
|
|
right: right,
|
|
arrowRight: arrowRight,
|
|
});
|
|
},
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
/** 关闭Tip */
|
|
onClose() {
|
|
// 保存关闭状态到本地存储
|
|
wx.setStorageSync('addToMiniprogramTipClosed', true);
|
|
// 隐藏Tip
|
|
this.setData({
|
|
show: false,
|
|
});
|
|
},
|
|
},
|
|
});
|