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');
}
}
})
最后效果如下：
自定义组件弹窗效果
文章到此就结束了 _ (:зゝ∠) _
撤了~~~
网友评论