Weex組件<waterfall>瀑布流和GridView效果的使用——Weex的學(xué)習(xí)之路（九）

最近項(xiàng)目有點(diǎn)忙，weex學(xué)習(xí)更新稍微慢了些。近期給自己列了一個(gè)學(xué)習(xí)計(jì)劃表，想用weex做一個(gè)App，目前覺得列表比較好做，同時(shí)weex原生組件使用起來都很方便，就是一些自定義的組件在使用的時(shí)候，在引用上有一些坑需要注意。

前幾天我準(zhǔn)備使用<waterfall>在頁面上做一個(gè)快捷入口，開始以為<waterfall>只能做瀑布流，看來我是小看他的功能了，其實(shí)<waterfall>是在<list>的基礎(chǔ)上封裝的，它是列表功能的核心組件，擁有平滑的滾動(dòng)和高效的內(nèi)存管理，具有回收和復(fù)用的能力，可以大幅優(yōu)化內(nèi)存占用和渲染性能。話不多少，下面看看具體的使用吧：

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. 如何讓瀑布流變成規(guī)則的GridView（重點(diǎn)）

在官網(wǎng)上可以看到demo里設(shè)置的寬高都是自適應(yīng)，也就是說<waterfall>會(huì)根據(jù)其Cell里的item高度，變成高度不一樣的瀑布流。那么，要是我們把item的寬高都設(shè)定成固定的寬高，是不是就可以變成像GridView一樣規(guī)則的橫向列表了呢？

那下面我們就來設(shè)置一下試試看：

.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;
}

以上是我設(shè)置<waterfall>的樣式，那么我們運(yùn)行看看效果：

運(yùn)行之后的效果圖

這樣一個(gè)完成weex原生組件<waterfall>做出來GridView的效果了，其中要特別注意item的樣式要居中，如果對weex樣式還不是很熟練的小伙伴就要邊寫樣式邊看Flex 布局教程了，我這里推薦一個(gè)圖文并茂，容易理解的：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">懶人計(jì)劃</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" >手機(jī)號(hào)</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", "關(guān)于聚有財(cái)", false);
    },
    homeBanranMethod() {
      var self = this;
      GET("content/bannerList?", { position: "8" }, function(res) {
        if (res.success != 1) {
          modal.toast({ message: "輪播圖請求錯(cuò)誤!", 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: "公告請求錯(cuò)誤!", 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: "快捷入口請求錯(cuò)誤!", 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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容