最近項目有點忙,weex學習更新稍微慢了些。近期給自己列了一個學習計劃表,想用weex做一個App,目前覺得列表比較好做,同時weex原生組件使用起來都很方便,就是一些自定義的組件在使用的時候,在引用上有一些坑需要注意。
前幾天我準備使用<waterfall>在頁面上做一個快捷入口,開始以爲<waterfall>只能做瀑布流,看來我是小看他的功能了,其實<waterfall>是在<list>的基礎上封裝的,它是列表功能的核心組件,擁有平滑的滾動和高效的內存管理,具有回收和複用的能力,可以大幅優化內存佔用和渲染性能。話不多少,下面看看具體的使用吧:
1. 和<list>相似,裏面的子控件只能是cell
<waterfall column-count="4" column-width="auto" class="grildView_cellType">
<cell v-for="num in homeQuickList" :key="num.iconCopywriting">
<div class="grildViewType" >
<image class="itemPhoto" :src="num.imageUrl"/>
<text class="grildViewType_tv">{{num.iconCopywriting}}</text>
</div>
</cell>
</waterfall>
使用起來是不是覺得和<list>很相似呢
2. 如何讓瀑布流變成規則的GridView(重點)
在官網上可以看到demo裏設置的寬高都是自適應,也就是說<waterfall>會根據其Cell裏的item高度,變成高度不一樣的瀑布流。那麼,要是我們把item的寬高都設定成固定的寬高,是不是就可以變成像GridView一樣規則的橫向列表了呢?
那下面我們就來設置一下試試看:
.itemPhoto{
width: 88px;
height: 88px;
}
.grildViewType{
justify-content: center;
flex-direction: column;
padding-top: 30px;
align-items: center;
}
.grildViewType_tv{
font-size: 26px;
color: #333;
margin-top: 20px;
}
.grildView_cellType{
margin-left: 25px;
margin-right: 25px;
justify-content: center;
}
以上是我設置<waterfall>的樣式,那麼我們運行看看效果:
這樣一個完成weex原生組件<waterfall>做出來GridView的效果了,其中要特別注意item的樣式要居中,如果對weex樣式還不是很熟練的小夥伴就要邊寫樣式邊看Flex 佈局教程了,我這裏推薦一個圖文並茂,容易理解的:Flex 佈局教程。
最後我把完整的代碼貼上,有需要的小夥伴可以嘗試一下:
<template>
<scroller class="scroller">
<div class="homeFragmentType">
<slider class="sliderType" interval="3000" auto-play="true" >
<div class="sliderDivType" v-for="img in imageNewList" :key="img.adId">
<image class="imageType" resize="cover" :src="img.iconUrl"/>
</div>
<indicator class="indicator"></indicator>
</slider>
<!-- <homeAutoVerticalTextView class="homeTextView" ref="homeAutoVerticalTextView"/> -->
<div class="line"></div>
<waterfall column-count="4" column-width="auto" class="grildView_cellType">
<cell v-for="num in homeQuickList" :key="num.iconCopywriting">
<div class="grildViewType">
<image class="itemPhoto" :src="num.imageUrl"/>
<text class="grildViewType_tv">{{num.iconCopywriting}}</text>
</div>
</cell>
</waterfall>
<div class="canClickTitleType" @click="lazyTitleClick">
<div class="floor">
<text class="mainHeadingType">懶人計劃</text>
<text class="subheadingType">樂輕鬆,從一鍵委託開始</text>
</div>
<div>
<text class="moreType">更多</text>
</div>
</div>
<customViewComponent class="textViewType" ref="customViewComponent"/>
<div class="canClickTitleType" @click="lazyTitleClick2">
<richText num="18738523758" class="richType" >手機號</richText>
</div>
<div class="canClickTitleType" @click="lazyTitleClick2">
<weexDialogView class="richType" />
</div>
</div>
</scroller>
</template>
<script>
const modal = weex.requireModule("modal");
import { GET } from "@/utils/requistUrl";
import { GET2 } from "@/utils/requistUrl2";
export default {
data: function() {
return {
imageNewList: [],
notifyList: [],
homeQuickList:[],
replaceList:[],
};
},
created: function() {
var self = this;
// this.$refs.weexTestComponent.focus2();
weex
.requireModule("weexTestModule")
.changeBackground("#DE1E7C", "首頁", true);
// weex.requireModule('weexTestComponent').focus2();
self.homeBanranMethod();
self.homeNotifice();
self.homeQuick();
},
mounted: function() {
this.$refs.customViewComponent.focus2("黎明", "男", "25");
// self.$refs.homeAutoVerticalTextView.transmitData("肯定到這裏了");
},
methods: {
lazyTitleClick() {
// weex.requireModule('weexTestModule').showToast();
weex
.requireModule("weexTestModule")
.changeBackground("#DE1E7C", "關於聚有財", false);
},
homeBanranMethod() {
var self = this;
GET("content/bannerList?", { position: "8" }, function(res) {
if (res.success != 1) {
modal.toast({ message: "輪播圖請求錯誤!", duration: 2 });
} else {
self.imageNewList = res.datas.result || [];
// self.imageNewList = self.imageNewList.concat(res.datas.result);
}
});
},
homeNotifice() {
var self = this;
GET2(
"public/system/information?",
{ type: "0", pageNum: "1", pageSize: "6" },
function(res) {
if (!res.success) {
modal.toast({ message: "公告請求錯誤!", duration: 2 });
} else {
self.notifyList = res.datas.result || [];
self.$refs.homeAutoVerticalTextView.transmitData(
JSON.stringify(res)
);
}
}
);
},
homeQuick(){
var self=this;
GET2(
"app/quickentry?",
{ },
function(res) {
if (!res.success) {
modal.toast({ message: "快捷入口請求錯誤!", duration: 2 });
} else {
// self.replaceList=res.datas.result||[];
// self.homeQuickList = self.replaceList.slice(0,4);
self.homeQuickList = res.datas.result||[];
}
}
);
}
}
};
</script>
<style scoped>
.scroller{
width: 750px;
height: 2000px;
background-color: #fff
}
.homeFragmentType {
width: 750px;
height: 2000px;
}
.canClickTitleType {
flex-direction: row;
background-color: #fff;
direction: ltr;
margin-bottom: 1px;
}
.mainHeadingType {
font-size: 40px;
text-align: left;
padding-top: 25px;
margin-left: 30px;
font-weight: bold;
padding-bottom: 15px;
}
.subheadingType {
font-size: 24px;
text-align: left;
color: #999999;
margin-left: 30px;
padding-bottom: 15px;
}
.richType {
width: 400px;
height: 200px;
}
.textViewType {
width: 750px;
margin-top: 10px;
height: 400px;
background-color: #fff;
}
.sliderType {
width: 750px;
height: 436px;
}
.sliderDivType {
width: 750px;
height: 436px;
position: relative;
}
.imageType {
width: 750px;
height: 436px;
}
.indicator {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 40px;
background-color: rgba(0, 0, 0, 0);
item-color: #ddd;
item-selected-color: rgb(0, 180, 255);
}
.homeTextView {
width: 750px;
height: 100px;
background-color: #fff;
}
.itemPhoto{
width: 88px;
height: 88px;
}
.grildViewType{
justify-content: center;
flex-direction: column;
padding-top: 30px;
align-items: center;
}
.grildViewType_tv{
font-size: 26px;
color: #333;
margin-top: 20px;
}
.grildView_cellType{
margin-left: 25px;
margin-right: 25px;
justify-content: center;
}
.line {
background-color: #ebebeb;
width: 750px;
height: 2px;
}
</style>