主要功能：
1.可以自定义四种格式：text，input，radio，check；
2.可以自定义按钮个数【0~n】，并可以为每个按钮增加自定义回调；
3.支持下部显示tip；
4.主要方法：popWindow.showText，showEdit，showRadio，showCheck；
接下来看效果：
代码如下：
popWindow.js
const util = require('../../util/util.js');
var __evt_cnt__=0;
// 要求item包含一个指向callBack的成员
var __bindBtnEvent = function (that,btn) {
let funcName = "__evt_" + (__evt_cnt__++) + "__";
btn.func = funcName;
//that[funcName] = btn.callBack;
that[funcName] = function(){
__res__.btn = btn;
that.hide();
}
};
var __res__ = {oldVal:null,newVal:null,btn:null,rad:null,chk:null};
var __bindEdtEvent = function (that, item){
let funcName = "__evt_" + (__evt_cnt__++) + "__";
item.func = funcName;
//that[funcName] = item.callBack;
that[funcName] = function (e) {
let i=e.currentTarget.dataset.index;
__res__.newVal[i].value = e.detail.value;
}
};
var __bindRadEvent = function (that, item) {
let funcName = "__evt_" + (__evt_cnt__++) + "__";
item.func = funcName;
//that[funcName] = item.callBack;
that[funcName] = function (e) {
let i = e.currentTarget.dataset.index;
item.value = true;
item.imgid = 1;
__res__.newVal[i].value = true;
for (let x = 0; x < that.data.items.length; x++) {
if (x != i) {
that.data.items[x].value = false;
that.data.items[x].imgid = 0;
__res__.newVal[x].value = false;
}
}
that.setData({ items: that.data.items });
}
};
var __bindChkEvent = function (that, item) {
let funcName = "__evt_" + (__evt_cnt__++) + "__";
item.func = funcName;
//that[funcName] = item.callBack;
that[funcName] = function (e) {
let i = e.currentTarget.dataset.index;
item.value = !item.value;
item.imgid = (item.value ? 1 : 0);
__res__.newVal[i].value = item.value;
that.setData({ items: that.data.items });
}
};
Component({
/**
* 组件的属性列表
*/
properties: {
autoHide: {
type: Boolean,
value: true,
},
shape: {
type: Boolean,
value: true
},
},
/**
* 组件的初始数据
*/
data: {
type: 'none', // text, radio, check, edit
title: '',
text: '',
prompt: '',
buttons:null,
items:null,
iconCheck:[
"iconfont icon-circle-0",
"iconfont icon-circle-1"
],
},
/**
* 组件的方法列表
*/
methods: {
__onPWClose: null,
showText: function (title, text, prompt, buttons, onClose) {
this.__onPWClose = onClose;
if(!buttons) buttons=[];
for (let i = 0; i < buttons.length;i++){ // 动态绑定事件
__bindBtnEvent(this,buttons[i]);
if(!buttons[i].style) buttons[i].style="";
}
this.setData({
type:'text',
title:title,
text: text,
prompt: prompt,
buttons:buttons,
});
},
showEdit: function (title, items, prompt, buttons, onClose) {
this.__onPWClose = onClose;
for (let i = 0; i < items.length; i++) { // 动态绑定事件
__bindEdtEvent(this, items[i]);
}
__res__.oldVal = util.deepCopy(items);
__res__.newVal = util.deepCopy(items);
if (!buttons) buttons = [];
for (let i = 0; i < buttons.length; i++) { // 动态绑定事件
__bindBtnEvent(this, buttons[i]);
if (!buttons[i].style) buttons[i].style = "";
}
this.setData({
type: 'edit',
title: title,
items: items,
prompt: prompt,
buttons: buttons,
});
},
showRadio: function (title, items, prompt, buttons, onClose) {
this.__onPWClose = onClose;
for (let i = 0; i < items.length; i++) { // 动态绑定事件
__bindRadEvent(this, items[i]);
if (!items[i].style) items[i].style = "";
items[i].imgid = (items[i].value?1:0);
}
__res__.oldVal = util.deepCopy(items);
__res__.newVal = util.deepCopy(items);
if (!buttons) buttons = [];
for (let i = 0; i < buttons.length; i++) { // 动态绑定事件
__bindBtnEvent(this, buttons[i]);
if (!buttons[i].style) buttons[i].style = "";
}
this.setData({
type: 'radio',
title: title,
items: items,
prompt: prompt,
buttons: buttons
});
},
showCheck: function (title, items, prompt, buttons, onClose) {
this.__onPWClose = onClose;
for (let i = 0; i < items.length; i++) { // 动态绑定事件
__bindChkEvent(this, items[i]);
if (!items[i].style) items[i].style = "";
items[i].imgid = (items[i].value ? 1 : 0);
}
__res__.oldVal = util.deepCopy(items);
__res__.newVal = util.deepCopy(items);
if (!buttons) buttons = [];
for (let i = 0; i < buttons.length; i++) { // 动态绑定事件
__bindBtnEvent(this, buttons[i]);
if (!buttons[i].style) buttons[i].style = "";
}
this.setData({
type: 'check',
title: title,
items: items,
prompt: prompt,
buttons: buttons
});
},
hide: function(){
this.setData({ type: 'none' });
this.__onPWClose(__res__);
},
__onPWHide: function () {
if (this.data.autoHide){
this.hide();
}
},
}
})
popWindow.xml
<view style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;display:{
{type!='none'?'block':'none'}};">
<view class="in-center" style="width:100%;height:100%;z-index:11;background:rgba(0,0,0,{
{shape?'0.6':'0'}});" catchtouchmove="preventTouchMove" bindtap="__onPWHide">
<view style="width:80%;min-height:30px;padding:5px 10px;background:#FFF;border:1px solid #99A8FF;border-radius:3px;" catchtap="none">
<view class="in-center" hidden="{
{!title}}" style="width:100%;height:30px;border-bottom:1px solid #99A8FF;margin-bottom:10px;">{
{title}}</view>
<scroll-view scroll-y="true" style="max-height:60vh;">
<view wx:if="{
{type=='text'}}" style="padding:5px;min-height:100px;white-space:pre-line;line-height:28px;">{
{text}}</view>
<view wx:if="{
{type=='edit'}}" style="height:26px;display:flex;{
{item.style}}" wx:for="{
{items}}" wx:key="key" wx:for-index="idx">
<view style="min-width:32px;height:100%;">{
{item.text}}</view>
<input style="min-width:200px;height:24px;padding-left:4px;font-size:14px;border:1px solid #DDD;" value="{
{item.value}}" data-index="{
{idx}}" bindblur="{
{item.func}}"/>
</view>
<view class="row-center" wx:if="{
{type=='radio' || type=='check'}}" style="padding:3px;{
{item.style}}" wx:for="{
{items}}" wx:key="key" wx:for-index="idx" data-index="{
{idx}}" bindtap="{
{item.func}}">
<view class="{
{iconCheck[item.imgid]}}" style="font-size:56rpx;margin-right:8px;color:#00D;"/>
<view style="flex:1;font-size:14px;">{
{item.text}}</view>
</view>
</scroll-view>
<view class="row-center" style="justify-content:space-around;margin:15px;">
<view class="btn-opera" wx:for="{
{buttons}}" wx:key="key" bindtap="{
{item.func}}" style="{
{item.style}}">{
{item.text}}</view>
</view>
<view wx:if="{
{prompt.length>0}}" style="width:100%;height:20px;font-size:10px;color:#F00;">{
{prompt}}</view>
</view>
</view>
</view>
popWindow.json
{
"component": true,
"usingComponents": {}
}popWindow.wxss
@import '../../app.wxss';
.in-center{
display:flex;
align-items:center;
justify-content:center;
}
.row-center{
display:flex;
align-items:center;
justify-content:center;
}
.col-center{
display:flex;
flex-direction: column;
align-items:center;
justify-content:center;
}
.item-opera{
height:34px;
line-height:34px;
padding-left:5px;
display:flex;
align-items:center;
}
.btn-opera{
width:72px;
height:32px;
background:#FFF;
border:1px solid #99A8FF;
border-radius:2px;
display:flex;
align-items:center;
justify-content:center;
font-size:36rpx;
color:#99A8FF;
}
使用示例：
myPage.popWindow.showRadio("选择书本", oldVal,"*仅列出您可编辑的书本，如需更多可联系管理员", [{ text: "取消", id: 0 }, { text: "确定", id: 1 }], function (res) {
if (res.btn.id == 1 && !util.compareEntity(res.oldVal, res.newVal)) {
let iNew = -1;
for (let i = 0; i < res.newVal.length; i++) {
if (res.newVal[i].value) { iNew = i; break; }
}
if (iNew < 0 || iNew==myPage.data.item.iBook) { return; }
myPage.data.item.iBook = iNew;
myPage.data.item.iChapter = -1;
myPage.data.item.bookName = res.newVal[iNew].text;
myPage.setData({ item: myPage.data.item });
}
});