Weex開發之mask

Weex · 發表 2019-02-01 11:20:01

摘要： mask彈層示例在移動開發中，我們經常會做一些彈框相關的東西，在Weex跨平臺框架中，實現mask效果也比較簡單。下面是示例效果：以下是示例程式碼： <template> <div> <...

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 install

iOS 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

效果

Question

執行過程中出現問題在以下地址解決方法，如果沒有找到，可以參考 eros快速入門新建一個Weex工程，然後將src和配置檔案的程式碼拷貝過去。如果還有問題，請加群：515980159