wxc-navpage组件
在iOS，导航使用的控制是UINavigationController。同样，Weex也提供了该组件，那就是wxc-navpage。
我们，可以看到 wxc-navpage不仅支持基础的样式，同样提供了 title、title-color、 left-item-title、left-item-color、right-item-src等等属性，这里可以参考weex-navpage文档 。
具体实现代码
<template>
<div style="flex-direction: column;">
<wxc-tabbar tab-items={{tabItems}}></wxc-tabbar>
</div>
</template>
<script>
require('weex-components');
module.exports = {
data: {
baseURL:'',
publishbtn:'http://d2.freep.cn/3tb_161219150711ikk9580965.png',
tabItems: [
{
index: 0,
title: "分类",
titleColor: 0x0,
icon: "",
image: "http://d2.freep.cn/3tb_161219150708j369580965.png",
selectedImage: "http://d2.freep.cn/3tb_161219150708udou580965.png",
src: "modules/main.js",
visibility: "visible"
},
{
index: 1,
title: "心愿池",
titleColor: 0x0,
icon: "",
image: "http://d3.freep.cn/3tb_161219150709yh2n580965.png",
selectedImage: "http://d2.freep.cn/3tb_161219150709tpxd580965.png",
src: "modules/wishpool.js",
visibility: "hidden"
},
{
index: 2,
title: "消息",
titleColor: 0x0,
icon: "",
image: "http://d3.freep.cn/3tb_1612191507141w7j580965.png",
selectedImage: "http://d2.freep.cn/3tb_161219150714xdv2580965.png",
src: "modules/message.js",
visibility: "hidden"
},
{
index: 3,
title: "我的",
titleColor: 0x0,
icon: "",
image: "http://d2.freep.cn/3tb_1612191507141fuo580965.png",
selectedImage: "http://d3.freep.cn/3tb_161219150708wgiu580965.png",
src: "modules/mine.js",
visibility: "hidden"
}
]
},
created: function () {
var bundleUrl = this.$getConfig().bundleUrl;
bundleUrl = new String(bundleUrl);
var nativeBase;
var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
if (isAndroidAssets) {
nativeBase = 'file://assets/dist/';
this.baseURL=nativeBase;
}
else if (isiOSAssets) {
nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
this.baseURL=nativeBase;
}
else {
var host = 'localhost:8080';
var matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
if (matches && matches.length >= 2) {
host = matches[1];
}
//此处需注意一下,tabbar 用的直接是jsbundle 的路径,但是navigator是直接跳转到新页面上的.
nativeBase = 'http://' + host + '/dist/';
this.baseURL='http://' + host + '/index.html?page=./dist/';
}
for (var i = 0; i < this.tabItems.length; i++) {
var tabItem = this.tabItems[i];
tabItem.src = nativeBase + tabItem.src;
}
}
}
</script>slider组件
轮播组件用于在一个网页中展示多个图片，初始设置是3秒内在2个图片做切换。weex 所有的组件都支持轮播，特定的indicator组件只能是slider的子组件。
具体实现代码
<template>
<div class="center" style="height: 500px;margin-left: 40px;margin-right: 40px">
<slider class="slider" append="tree" interval="2000" auto-play="true">
<image repeat="{{list}}" src="{{bookimg}}" style="width:420px;height: 500px"></image>
<indicator class="indicator"></indicator>
</slider>
</div>
</template>
<style>
.center {
justify-content: center;
align-items: center;
}
.slider {
flex-direction: row;
width: 420px;
height: 500px;
}
.indicator {
position: absolute;
itemSize:32;
top:140px;
left:140px;
width:140px;
height:520px;
itemColor: #dddddd;
itemSelectedColor: #F8BB2D;
}
</style>
<script>
require('weex-components');
module.exports = {
data:{
baseURL: '',
list:[
{bookimg:'http://d3.freep.cn/3tb_161219152729y6i4580965.png'},
{bookimg:'http://d3.freep.cn/3tb_161219152731g968580965.png'}
]
},
methods: {
handleSliderChange: function() {
var nowCnt = this.eventCnt + 1
this.eventCnt = nowCnt
}
}
}
</script>webview组件
在Weex中也支持Webview类似组件，只是Weex命名其为web。具体使用如下：
<web class="content" id="webview" src="{{src}}"></web>其中src是需要引入网站的url
dropdown组件
DropDown控件用于页面创建下拉列表的部分，我们将该部分单独写成we文件，并根据不同分类页面显示对应的二级分类下拉页面
由于下拉列表属于页面中的部分，所以要实现不同分类页面显示对应的二级分类下拉页面可以直接通过对dropdown.we中的变量statusType赋值
<dropdown class="dropdown" status-type="{{type}}">具体实现代码
<template>
<div class="select-container">
<div class="content">
<content></content>
</div>
<div class="mask" id="mask" onclick="switchView"></div>
<scroller class="scroller" id="scroller">
<div class="options" id="options" style="top:{{top}};">
<div repeat="{{status}}" class="cell" vid="{{id}}" onclick="onItemClick">
<text class="name {{id==statusId?'current': ''}}" if="{{id!=statusId}}">{{name}}</text>
<text class="name {{id==statusId?'current': ''}}" style="color: cornflowerblue;" if="{{id==statusId}}">{{name}}</text>
<image style="width: 32px;height: 32px;" src="{{flagSrc}}" if="{{id==statusId}}"></image>
</div>
</div>
<div style="height: 90px"></div>
</scroller>
<div class="select" onclick="switchView">
<text class="current-text">{{statusName}}</text>
<image id="arrow" style="width: 27px;height: 23px;" src="{{arrowSrc}}"></image>
</div>
</div>
<!-- weex not support z-index -->
</template>
<style>
/* item height: 90 ; */
.select-container{
flex-direction: column;
position: relative;
z-index: 1000;
}
.scroller{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 650px;
opacity: 0;
}
.content{
width: 750px;
margin-top: 90px;
}
.mask{
position: absolute;
top: 90px;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0, .5);
visibility: hidden;
opacity:0.5;
}
.select {
width: 750px;
height: 90px;
top:0;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding-left: 30px;
padding-right: 30px;
border-bottom-width: 1;
border-style: solid;
border-color: #ddd;
background-color: powderblue;
z-index: 1001;
position: absolute;
}
.options {
position: relative;
width: 750px;
background-color: #ffffff;
transform-origin: center center;
}
.cell {
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 750px;
height: 90px;
padding-left: 30px;;
padding-right: 30px;;
border-bottom-width: 1;
border-style: solid;
border-color: #ddd;
}
.current-text {
color: #333;
font-size: 33px;
flex: 1;
}
.name {
color: #333;
font-size: 33px;
flex: 1;
}
</style>
<script>
var animation = require('@weex-module/animation');
module.exports = {
data: {
statusId: '0',
statusType: 'jiaocai',
top:'',
status: [],
jiaocai: [
{id: '0', name: '全部学院'},
{id: '1', name: '通信与信息工程学院'},
{id: '2', name: '通信抗干扰技术国家级重点实验室'},
{id: '3', name: '电子工程学院'},
{id: '4', name: '微电子与固体电子学院'},
{id: '5', name: '物理电子学院'},
{id: '6', name: '光电信息学院'},
{id: '7', name: '计算机科学与工程学院'},
{id: '8', name: '信息与软件工程学院'},
{id: '9', name: '自动化工程学院'},
{id: '10', name: '机械电子工程学院'},
{id: '11', name: '生命科学与技术学院'},
{id: '12', name: '数学科学学院'},
{id: '13', name: '经济与管理学院'},
{id: '14', name: '政治与公共管理学院'},
{id: '15', name: '外国语学院'},
{id: '16', name: '马克思主义教育学院'},
{id: '17', name: '能源科学与工程学院'},
{id: '18', name: '资源与环境学院'},
{id: '19', name: '航空航天学院'},
{id: '20', name: '格拉斯哥学院'},
{id: '21', name: '医学院'},
{id: '22', name: '英才试验学院'},
{id: '23', name: '创新创业学院'},
{id: '24', name: '基础与前沿学院'}
],
jisuanji: [
{id: '0', name: '全部应用'},
{id: '1', name: '编程语言'},
{id: '2', name: '操作系统'},
{id: '3', name: '数据库'},
{id: '4', name: '办公软件'},
{id: '5', name: '图形图像'},
{id: '6', name: '网页制作'},
{id: '7', name: '考试认证'}
],
kaoyan: [
{id: '0', name: '全部科目'},
{id: '1', name: '英语'},
{id: '2', name: '数学'},
{id: '3', name: '政治'},
{id: '4', name: '专业课'}
],
waiyu: [
{id: '0', name: '全部考试'},
{id: '1', name: 'CET-4'},
{id: '2', name: 'CET-6'},
{id: '3', name: '雅思IELTS'},
{id: '4', name: '托福TOEFL'},
{id: '5', name: 'GRE'},
{id: '6', name: 'GMAT'},
{id: '7', name: '托业TOEIC'},
{id: '8', name: '英语专业四级'},
{id: '9', name: '英语专业八级'},
{id: '10', name: '其他语种考试'}
],
gongwuyuan: [
{id: '0', name: '全部机构'},
{id: '1', name: '国家公务员'},
{id: '2', name: '地方公务员'}
],
qita: [
{id: '0', name: '全部其他'},
{id: '1', name: '经管励志'},
{id: '2', name: '人文社科'},
{id: '3', name: '文学艺术'},
{id: '4', name: '科技生活'}
],
flagSrc: 'https://gw.alicdn.com/tps/TB11a2lKFXXXXbVXpXXXXXXXXXX-32-32.png',
arrowSrc: 'https://gw.alicdn.com/tps/TB1O3_aKFXXXXXdXVXXXXXXXXXX-27-23.png'
},
created: function(){
var self = this;
if(self.statusType=='jiaocai') {
self.status = self.jiaocai;
self.top = -24 * 90 - 1;
}
if(self.statusType=='jisuanji') {
self.status = self.jisuanji;
self.top = -7 * 90 - 1;
}
if(self.statusType=='kaoyan') {
self.status = self.kaoyan;
self.top = -4 * 90 - 1;
}
if(self.statusType=='waiyu') {
self.status = self.waiyu;
self.top = -10 * 90 - 1;
}
if(self.statusType=='gongwuyuan') {
self.status = self.gongwuyuan;
self.top = -2 * 90 - 1;
}
if(self.statusType=='qita') {
self.status = self.qita;
self.top = -4 * 90 - 1;
}
},
computed: {
statusName: {
get: function(){
var id = this.statusId;
return this.status.filter(function(s){
return s.id == id
})[0].name;
}
}
},
methods: {
switchView: function() {
this.toggleMaskVisible();
this.opacity(this._ids.scroller.el.ref);
this.collapse(this._ids.options.el.ref);
this.rotate(this._ids.arrow.el.ref);
},
onItemClick: function(e) {
var vid = e.target.attr.vid;
this.updateStatus(vid);
this.switchView();
this.$dispatch('statuschange', {
id: this.statusId,
name: this.statusName
})
},
updateStatus: function(id) {
this.statusId = id;
},
toggleMaskVisible: function(){
this.current_showMask = !this.current_showMask;
var visibility = this.current_showMask? 'visible': 'hidden';
this._ids.mask.el.setClassStyle({visibility:visibility});
},
collapse: function(ref, callback) {
var translate = 'translate(0, 100%)';
this.current_translate = this.current_translate ? '' : translate;
this.anim(ref, {
transform: this.current_translate
}, 'ease', 100, callback);
},
opacity: function(ref, callback) {
var self = this;
self.current_opacity = self.current_opacity === 1 ? 0 : 1;
self.anim(ref, {
opacity: self.current_opacity
}, 'ease', 100, callback);
},
rotate: function(ref, callback) {
var self = this;
if(!self.current_rotate) {
self.current_rotate = 0;
}
self.current_rotate = self.current_rotate + 180;
self.anim(ref, {
transform: 'rotate(' + self.current_rotate + 'deg)'
}, 'linear', 100, callback);
},
anim: function(ref, styles, timingFunction, duration, callback) {
animation.transition(ref, {
styles: styles,
timingFunction: timingFunction,
duration: duration
}, callback || function(){});
}
}
}
</script>wxc-countdown组件
wxc-countdown是时间倒计时所用的组建，可以实现秒、分、小时的页面上倒计时功能
显示时间倒计时HTML部分：
<wxc-countdown class="center" id="countdown" remain="{{countdown.remain}}">
<text class="ctno">{{countdown.time.D}}</text>
<text style="font-size:28px;color:darkgray;">天展示时间ⓘ</text>
</wxc-countdown>显示时间倒计时js部分：
data:{
countdown: {
remain: 5270400,
time: {
D: '0'
}
},
ready: function() {
this.initCountdown('countdown','0');
//初始为39天
this.publishlistrow[0].countdown.remain-=21*86400;
},
methods: {
initCountdown: function(id,order) {
var self = this.publishlistrow[order];
var $countdown = this.$vm(id);
$countdown.$on('tick', function(e) {
Object.assign(self[id].time, e.detail);
});
$countdown.$on('alarm', function(e) {
Object.assign(self[id].time, e.detail);
});
}
}若我们使得extend方法将倒计时恢复为60天并显示提示信息“有效期已延长至60天“，有：
extend: function(e) {
var obj = e.target.attr;
var order = obj.order;
var self = this;
self.publishlistrow[order].countdown.remain+=5184000-self.publishlistrow[order].countdown.time.D*86400;
self.toast("有效期已延长至60天");
},
toast: function(msg, duration) {
duration = duration || 2;
var modal = require('@weex-module/modal');
modal.toast({
'message': msg,
'duration': duration
});
},
749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
