Weex组件<waterfall>瀑布流和GridView效果的使用——Weex的学习之路(九)

最近项目有点忙,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>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容