Weex开发之mask
mask弹层示例
在移动开发中，我们经常会做一些弹框相关的东西，在Weex跨平台框架中，实现mask效果也比较简单。下面是示例效果：
在这里插入图片描述
在这里插入图片描述
以下是示例代码：
<template>
<div>
<div class="comment-btn" @click="showAd()">
<text class="comment-text">广告</text>
</div>
<div class="comment-btn" @click="showStar()">
<text class="comment-text">评论</text>
</div>
<!--广告弹框-->
<div class="mask" v-if="show">
<wxc-mask height="700"
width="560"
border-radius="30"
duration="300"
:has-overlay="true"
:show-close="true"
:show="show"
:has-animation="hasAnimation"
@wxcMaskSetHidden="wxcMaskSetHidden">
<div>
<image class="mask-image" resize="cover" src="bmlocal://assets/home_mask.png"></image>
</div>
</wxc-mask>
</div>
<!--评分组件-->
<div class="mask" v-if="showMask">
<div class="mask-dialog">
<div class="star-group">
<div class="mr5" @click="setScore(1)"><text class="iconfont f20" :class="[score>0 ?'star-on':'star-off']"></text></div>
<div class="mr5" @click="setScore(2)"><text class="iconfont f20" :class="[score>1?'star-on':'star-off']"></text></div>
<div class="mr5" @click="setScore(3)"><text class="iconfont f20" :class="[score>2?'star-on':'star-off']"></text></div>
<div class="mr5" @click="setScore(4)"><text class="iconfont f20" :class="[score>3?'star-on':'star-off']"></text></div>
<div @click="setScore(5)"><text class="iconfont f20" :class="[score>4?'star-on':'star-off']"></text></div>
</div>
<div class="grade-box">
<text class="grade-txt">差</text>
<text class="grade-txt">一般</text>
<text class="grade-txt">很好</text>
</div>
<textarea class="textarea" rows="5" placeholder="发布留言" v-model="message"></textarea>
<div class="mask-btngroup">
<div class="mask-btngroup-item" @click="cancel()">
<text class="mask-item-txt">取消</text>
</div>
<div class="line"></div>
<div class="mask-btngroup-item" @click="confirm()">
<text class="mask-item-txt">确认</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {WxcMask} from 'weex-ui';
let domModule = weex.requireModule('dom')
export default {
components: {'wxc-mask': WxcMask},
data: () => ({
show: false,
showMask: false,
score:5,
hasAnimation: true
}),
methods: {
created() {
this.initIconFont();
},
initIconFont() {
domModule.addRule('fontFace', {
'fontFamily': 'iconfont',
'src': "url('http://at.alicdn.com/t/font_1028673_vs1slhfmpy.ttf')"
})
},
setScore(v){
if(v===this.score){
this.score = v-1;
}else{
this.score = v;
}
},
wxcMaskSetHidden() {
this.show = false;
},
showAd(){
this.show = true;
},
showStar(){
this.showMask = true;
},
cancel(){
this.showMask = false;
},
confirm(){
this.showMask = false;
},
}
};
</script>
<style scoped>
.iconfont {
font-family: iconfont;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e0000000;
}
.comment-btn {
background-color: #419DFB;
width: 176px;
height: 60px;
margin-top: 40px;
align-self: center;
justify-content: center;
border-radius: 8px;
}
.comment-text {
font-size: 28px;
color: #ffffff;
text-align: center;
}
.mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
align-items: center;
justify-content: center;
flex: 1;
}
.mask-image {
height: 700px;
width: 560px;
align-items: center;
border-radius: 30px;
}
.mask-dialog {
width: 540px;
border-radius: 28px;
background-color: #eeeeee;
align-items: center;
padding-top: 30px;
}
.star-on {
color: #ffd900;
}
.star-off {
color: #cfd9e6;
}
.grade-box {
width: 230px;
flex-direction: row;
justify-content: space-between;
margin-bottom: 30px;
}
.grade-txt {
font-size: 28px;
color: #5c7799;
}
.star-group{
flex-direction: row;
height: 30px;
width: 480px;
margin-bottom:10px;
justify-content: center;
}
.textarea {
width: 480px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
color: #5c7799;
placeholder-color: #a4b6cc;
font-size: 28px;
background-color: #fff;
}
.mask-btngroup {
width: 540px;
height: 88px;
flex-direction: row;
border-top-width: 1px;
border-top-color: #cfd9e6;
margin-top: 30px;
}
.mask-btngroup-item {
height: 88px;
flex: 1;
justify-content: center;
align-items: center;
border-radius: 100px;
}
.mask-item-txt{
font-size: 32px;
color: #419dfb;
}
.line {
height: 88px;
width: 1px;
background-color: #cfd9e6;
}
.mr5 {
margin-right: 10px;
}
.bold {
font-weight: bold;
}
</style>eros-yanxuan
简介
eros-yanxuan 是基于 eros 开发的Weex项目，部分页面参考了项目网易严选 weex 版本，欢迎star或fork。
运行
确保你本地已经集成了 eros 开发所需的环境。
clone 项目到本地：
$ git clone https://github.com/xiangzhihong/eros-yanxuan.git进入目录，下载前端所需的依赖：
$ cd eros-yanxuan
$ npm installiOS SDK
打开platforms目录下的WeexEros项目，在WeexEros中使用pod添加依赖。
$ cd platforms/ios/WeexEros
$ pod update // 下载 iOS 依赖
$ open WeexEros.xcworkspace // 自动打开项目选中模拟器，点击绿色箭头运行 app 即可。
Android
对于Android工程来说，使用Android Studio打开platforms目录下的WeexFrameworkWrapper的Android工程，然后使用install.sh安装Android工程的需要依赖包nexus和wxframework。
具体可以参考自行导入项目，便可运行起来。
运行
- 项目根目录下运行
eros dev - 关闭调试，拦截器，打开热更新
- 重新 build app
效果
在这里插入图片描述
Question
运行过程中出现问题在以下地址解决方法，如果没有找到，可以参考eros快速入门新建一个Weex工程，然后将src和配置文件的代码拷贝过去。 如果还有问题，请加群：515980159
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-02-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录