做个记录。（真机看效果）
核心出自：https://github.com/byk04712/weapp-popover。
先看效果：
1_.gif
2_.gif
简单的封装了一下：具体看代码
inputPop.js
// components/inputPop.js
const { windowWidth, windowHeight } = wx.getSystemInfoSync();
// 三角形箭头的高度
const trangleHeight = 12;
Component({
/**
* 组件的属性列表
*/
properties: {
accountList: {
type: Array,
value: [],
},
value: {
type: String,
value: "",
},
placeholder: {
type: String,
value: "请输入",
},
//width
pw: {
type: Number,
value: 100,
},
//hight
ph: {
type: Number,
value: 50,
},
},
/**
* 组件的初始数据
*/
data: {
visible: false,
// popover 距左距离
px: 0,
// popover 距上距离
py: 0,
// 垂直方向 top/bottom
vertical: "",
// 水平方向 left/center/right
align: "",
// popover 宽
//渲染的List
tempAccountList: [],
},
/**
* 组件的方法列表
*/
methods: {
onDisplay: function (e,value) {
let self = this;
wx.createSelectorQuery()
.selectViewport()
.scrollOffset((view) => {
let { pw, ph, px, py, vertical, align } = self.data;
let pOverW = (pw - e.width) / 2;
let offsetL = e.left,
offsetR = windowWidth - e.right,
offsetB = windowHeight - e.bottom;
if (offsetL >= pOverW && offsetR >= pOverW) {
align = "center";
px = e.left - pOverW;
} else if (offsetL > pOverW && offsetR < pOverW) {
align = "left";
px = windowWidth - (offsetR + pw);
// 如果向右贴边了，设置一点距离
if (windowWidth - pw == px) px -= 5;
} else if (offsetL < pOverW && offsetR > pOverW) {
align = "right";
px = e.left;
// 如果向左贴边了，设置一点距离
if (px == 0) px += 5;
}
if (offsetB >= ph + trangleHeight) {
vertical = "bottom";
py = view.scrollTop + e.bottom + trangleHeight;
} else {
vertical = "top";
py = view.scrollTop + e.top - ph - trangleHeight;
}
self.setData({
// visible: true,
px: px,
py: py,
// ph: ph,
vertical: vertical,
align: align,
tempAccountList: this.rule(value.detail.value),
ph: this.rule(value.detail.value).length * this.properties.ph,
visible: this.rule(value.detail.value).length > 0 ? true : false,
});
})
.exec();
},
rule(value) {
if (this.data.accountList.length > 0) {
let tempList = this.data.accountList.filter(function (item) {
return item.search(value) != -1;
});
return tempList;
} else {
return [];
}
},
bindfocus(e) {
if (this.data.accountList.length > 0) {
this.createSelectorQuery()
.select("#" + e.currentTarget.id)
.boundingClientRect((res) => {
this.onDisplay(res,e);
})
.exec();
}
// this.setData({
// tempAccountList: this.rule(e.detail.value),
// ph: this.rule(e.detail.value).length * 50,
// visible: this.rule(e.detail.value).length > 0 ? true : false,
// });
this.triggerEvent("bindfocus", e.detail.value);
},
bindblur(e) {
this.setData({
visible: false,
});
this.triggerEvent("bindblur", e.detail.value);
},
bindinput(e) {
this.setData({
tempAccountList: this.rule(e.detail.value),
ph: this.rule(e.detail.value).length * this.,
visible: this.rule(e.detail.value).length > 0 ? true : false,
});
this.triggerEvent("bindinput", e.detail.value);
},
//点击条目
onItemTap(data) {
this.triggerEvent("onItemTap", data.currentTarget.dataset);
},
},
lifetimes: {
created() {
this.data.tempAccountList = this.properties.accountList;
},
},
});
inputPop.json
{
"component": true,
"usingComponents": {}
}
inputPop.wxml
<!--components/inputPop.wxml-->
<input id="inputId" bindinput="bindinput" placeholder="{{placeholder}}" bindfocus="bindfocus" bindblur="bindblur" value="{{value}}" />
<view wx:if="{{visible}}" class='popover-view {{vertical}} {{align}}' style='width:{{pw}}px;height:{{ph}}px;left:{{px}}px;top:{{py}}px; z-index: 9999;'>
<view style="display: flex;color: #707070;font-size: 13px;">
<view style="flex: 1;display: flex; flex-direction: column; align-items: center;">
<view wx:for="{{tempAccountList}}" wx:key="key" style="padding-top: 15px;width: 100%; justify-content: center; display: flex;padding: 15px 0px;border-bottom: 1px solid #e2dada" catchtap="onItemTap" data-value="{{item}}" data-index="{{index}}">{{item}}</view>
</view>
</view>
</view>
inputPop.wxss
/* components/inputPop.wxss */
/*气泡弹窗样式*/
.popover-view {
position: absolute;
background-color: #f6f6f6;
/* box-shadow: 0 0 2px 2px #ddd; */
border-radius: 8px;
}
/* 实现三角形 */
.popover-view::before {
position: absolute;
display: inline-block;
width: 0;
height: 0px;
content: '';
border-style: solid;
border-width: 6px;
border-color: #f6f6f6 #f6f6f6 transparent transparent;
}
/* 上 */
.popover-view.top::before {
bottom: -6px;
transform: rotate(135deg);
}
/* 下 */
.popover-view.bottom::before {
top: -6px;
transform: rotate(-45deg);
}
/* 左 */
.popover-view.left::before {
right: 20px;
}
/* 中 */
.popover-view.center::before {
left: 47px;
}
/* 右 */
.popover-view.right::before {
left: 20px;
}
简单使用：
xxx.json
{
"usingComponents": {
"inputPop":"/components/inputPop"
}
}
xxx.wxml
<text>下标{{select.index}}---值{{select.value}}</text>
<view style="background: hotpink;">
<inputPop accountList="{{list}}" bind:onItemTap="onItemTap" value="{{inputValue}}" placeholder="请输入手机号码" bind:bindfocus="bindfocus" bind:bindblur="bindblur" bind:bindinput="bindinput">
</inputPop>
</view>
xxx.js
Page({
data: {
list: ["15307512354","13870000000"],
inputValue: "",
select: {},
},
onItemTap(data) {
console.log(data.detail);
this.setData({
select: data.detail,
});
},
bindblur(e) {
console.log(e.detail);
},
bindinput(e) {
console.log(e.detail);
},
bindfocus(e) {
console.log(e.detail);
},
});
网友评论