Weex实现GridView的网格布局以及浮层效果

Weex实现GridView的网格布局以及浮层效果

转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78261497.
本文出自 [ 党耀的博客 ]

目录

因为项目需要，在9月份自学了前端语言和weex相关的一系列东西，并初次使用了weex来改版首页，其中的踩坑经历后面会做一个分享出来，下面是正文。

---

一.概述

weex中提供了list标签用来展示列表页的布局，类似Android中的listview。但是没有类似gridview的网格布局，所以就需要在布局和数据上做操作。效果图如下：

二.实现方式

现在使用的weex是基于vue的2.0版本，所以如果你对js比较熟悉就直接看代码吧：

代码解析

template里如下布局如下：

<template>
    <div>
      <div v-for="v in list" class="row">
        <div v-for="item in v" class="item">
          <div class="module">
            <div class="typeLayout">
              <image class="img" :src="item.imgUrl"></image>
              <div class="numberAndType">
                 <div class="playtype" v-if="item.isZhibo === '1'">
                   <text class="typeText">{
   {item.typeText}}</text>
                 </div>
                 <div class="playtype2" v-else>
                   <text class="typeText">{
   {item.typeTime}}</text>
                 </div>    
              </div>

              <div class="zhuboModule">
                 <image class="zhuboImg" :src="item.imgUrl"></image>
                 <text class="zhuboName">{
   {item.zhuboName}}</text>
              </div>
            </div>

            <div class="name">
                <text class=