WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)呆瞻，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)。令用戶的使用感知更加統(tǒng)一。
微信開(kāi)發(fā)網(wǎng)頁(yè)時(shí)用到的是WEUI：
里面weui-master是UI靜態(tài)模板话侄，weui.js-master簡(jiǎn)單封裝了一些常用的方法吞杭，使用起來(lái)比較方便（比如dialog痒蓬，直接js調(diào)用weui.dialog({ title: '', content: ''});）。
WEUI同時(shí)也給小程序提供了一個(gè)版本GitHub地址。
等等，我今天要講什么來(lái)著
今天主要想通過(guò)小程序自定義組件來(lái)實(shí)現(xiàn)WEUI里的dialog彈窗功能。效果是這樣的：
dialog彈窗
首先創(chuàng)建組件dialog羽德，配置好json文件（{ "component": true}）章蚣。確定彈窗的結(jié)構(gòu)：
<view>
<view class="ys-mask"></view><!-- 遮罩層 -->
<view class="ys-dialog">
<view class="ys-dialog-title">彈窗標(biāo)題</view>
<view class="ys-dialog-content">彈窗內(nèi)容</view>
<view class="ys-dialog-bottom">
<view class="ys-dialog-btn" >取消</view>
<view class="ys-dialog-btn ys-dialog-ok-btn" >確定</view>
</view>
</view>
</view>
寫(xiě)下wxcss：
.ys-mask{
position: fixed;
z-index: 1000;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.ys-dialog{
position: fixed;
z-index: 5000;
width: 80%;
max-width: 300px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #FFFFFF;
text-align: center;
border-radius: 3px;
overflow: hidden;
}
.ys-dialog-title{
padding:1.3em 1.6em 0.5em;
font-weight:400;
font-size: 18px;
}
.ys-dialog-content{
padding: 0 1.6em 0.8em;
min-height: 40px;
font-size: 15px;
line-height: 1.3;
word-wrap: break-word;
word-break: break-all;
color: #808080;
}
.ys-dialog-bottom{
position: relative;
line-height: 48px;
font-size: 18px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.ys-dialog-bottom:after {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.ys-dialog-btn{
position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
color: #353535;
line-height: 48px;
font-size: 18px;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ys-dialog-ok-btn{
color: #09BB07;
}
.ys-dialog-btn:active{
background-color:#eee;
}
.ys-dialog-btn:after{
content: " ";
position: absolute;
left: 0;
top: 0;
width: 1px;
bottom: 0;
border-left: 1px solid #D5D5D6;
color: #D5D5D6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}
記得配置下index.json ({ "usingComponents": {"dialog":"../component/dialog/dialog" }})蓬豁，還有dialog初始化下Component({})琐谤。運(yùn)行后看到的結(jié)果是：
靜態(tài)頁(yè)面效果
接下來(lái)要將彈窗靜態(tài)頁(yè)面改成屬性配置织阳。頁(yè)面結(jié)構(gòu)改成如下：
<view hidden="{{!isShow}}">
<view class="ys-mask"></view>
<view class="ys-dialog">
<view class="ys-dialog-title">{{title}}</view>
<view class="ys-dialog-content">{{content}}</view>
<view class="ys-dialog-bottom">
<view class="ys-dialog-btn">{{cancelText}}</view>
<view class="ys-dialog-btn ys-dialog-ok-btn" >{{okText}}</view>
</view>
</view>
</view>
Component({
properties: {
title: {
type: String,
value: '彈窗標(biāo)題'
},
content: {
type: String,
value: '彈窗內(nèi)容'
},
cancelText: {
type: String,
value: '取消'
},
okText: {
type: String,
value: '確定'
}
},
data: {
isShow: false
},
methods: {
show: function(){
this.setData({
isShow: true
})
},
close: function(){
this.setData({
isShow: false
})
}
}
})
index
<button bindtap="tapDialog">顯示彈出框</button>
<dialog id="dialog"></dialog>
Page({
onReady: function () {
this.dialog = this.selectComponent('#dialog');
},
tapDialog:function(){
this.dialog.setData({
title:'溫馨提示',
content:'您就是我的Master嗎惊窖？',
cancelText:'滾刽宪！',
okText:'是的,Saber!'
});
this.dialog.show();
}
})
運(yùn)行效果如下：
自定義彈窗
感覺(jué)就是這個(gè)樣子
最后在加上事件就差不多了。
事件通過(guò)組件的triggerEvent()觸發(fā)引用頁(yè)面的方法界酒，代碼如下：
index頁(yè)面
<button bindtap="tapDialog">顯示彈出框</button>
<dialog id="dialog" bind:cancelEvent="cancelEvent" bind:okEvent="okEvent"></dialog>
Page({
onReady: function () {
this.dialog = this.selectComponent('#dialog');
},
tapDialog:function(){
this.dialog.setData({
title:'溫馨提示',
content:'您就是我的Master嗎圣拄？',
cancelText:'滾！',
okText:'是的,Saber!'
});
this.dialog.show();
},
cancelEvent: function(){
console.log(this.dialog.data.cancelText);
this.dialog.close();
},
okEvent: function(){
console.log(this.dialog.data.okText);
this.dialog.close();
}
})
dialog頁(yè)面
<view hidden="{{!isShow}}">
<view class="ys-mask"></view>
<view class="ys-dialog">
<view class="ys-dialog-title">{{title}}</view>
<view class="ys-dialog-content">{{content}}</view>
<view class="ys-dialog-bottom">
<view class="ys-dialog-btn" catchtap="_cancelEvent">{{cancelText}}</view>
<view class="ys-dialog-btn ys-dialog-ok-btn" catchtap="_okEvent">{{okText}}</view>
</view>
</view>
</view>
Component({
properties: {
title: {
type: String,
value: '彈窗標(biāo)題'
},
content: {
type: String,
value: '彈窗內(nèi)容'
},
cancelText: {
type: String,
value: '取消'
},
okText: {
type: String,
value: '確定'
}
},
data: {
isShow: false
},
methods: {
show: function(){
this.setData({
isShow: true
})
},
close: function(){
this.setData({
isShow: false
})
},
_cancelEvent: function(){
this.triggerEvent('cancelEvent');
},
_okEvent: function(){
this.triggerEvent('okEvent');
}
}
})
最后效果如下：
自定義組件彈窗效果
文章到此就結(jié)束了 _ (:зゝ∠) _
撤了~~~
