WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計。令用戶的使用感知更加統一。
微信開發網頁時用到的是WEUI：
里面weui-master是UI靜態模板，weui.js-master簡單封裝了一些常用的方法，使用起來比較方便（比如dialog，直接js調用weui.dialog({ title: '', content: ''});）。
WEUI同時也給小程序提供了一個版本GitHub地址。
等等，我今天要講什么來著
今天主要想通過小程序自定義組件來實現WEUI里的dialog彈窗功能。效果是這樣的：
dialog彈窗
首先創建組件dialog，配置好json文件（{ "component": true}）。確定彈窗的結構：
<view>
<view class="ys-mask"></view><!-- 遮罩層 -->
<view class="ys-dialog">
<view class="ys-dialog-title">彈窗標題</view>
<view class="ys-dialog-content">彈窗內容</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>
寫下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({})。運行后看到的結果是：
靜態頁面效果
接下來要將彈窗靜態頁面改成屬性配置。頁面結構改成如下：
<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: '彈窗標題'
},
content: {
type: String,
value: '彈窗內容'
},
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();
}
})
運行效果如下：
自定義彈窗
感覺就是這個樣子
最后在加上事件就差不多了。
事件通過組件的triggerEvent()觸發引用頁面的方法，代碼如下：
index頁面
<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頁面
<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: '彈窗標題'
},
content: {
type: String,
value: '彈窗內容'
},
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');
}
}
})
最后效果如下：
自定義組件彈窗效果
文章到此就結束了 _ (:зゝ∠) _
撤了~~~
