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="palytext">{{item.text}}</text>            </div>          </div>        </div>      </div>      <div class="divider"></div>    </div></template>

这里注意，div标签里的v-for 指令是vue.js的用法。我们用 v-for 指令根据一组数组的选项列表进行渲染，使用 item in items 形式表示，items 是数组的变量名，而 item 是数组元素的别名。我们要实现的所谓的网格布局，就是一个n行m列的布局。所以这里通过最外层的div标签的v-for控制的是行数，第二层div的v-for控制的就是列数，具体如何控制做到几行几列请看下面的模拟数据源：

list:[       [{url:"a",text:"a"}，{url:"aa",text:"aa"}],    [{url:"b",text:"b"}，{url:"bb",text:"bb"}]                                 ]

这个list数组里面分别有两个数组，暂且称为数组A和数组B。每个数组里面又有两个对象。所以在list数据源里，数组的个数就代表了有几行，那么在数组A或者数组B中，对象的个数就代表了每行有几列。到这里，就完成了我们想要实现的网格布局。

接下来说一下效果图上的浮层。这个浮层其实就是简单的利用了渲染机制在布局和样式上做的操作，一切都是细节。直接看代码，找到 div class=”numberAndType” 这里，这里处理的就是每个子模块上浮层的布局。这个div标签和上面的image标签是平级关系，那么渲染的时候只要class=”numberAndType”这个标签大小和它父标签控制的区域一样大就会按布局顺序从上到下渲染：先渲染image标签，然后渲染class=”numberAndType”这个div，所以就造成了一种浮层的效果。

---

源码

有同学还不理解的话直接复制下面这段源码，打开官方提供的在线编辑器http://dotwe.org/vue 粘贴后运行即可预览。

注意：有可能某些浏览器不支持，run之后打开手淘扫码也可进行预览或者github上找到官方的demo有个playgroundApp安装也可进行扫码预览。

<template>    <div class="onplay">      <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="palytext">{{item.text}}</text>            </div>          </div>        </div>      </div>      <div class="divider"></div>    </div></template><style scoped>    .row{        flex-direction: row;        height:284px;        padding-left:20px;        padding-right:20px;    }    .item{        flex:1;        justify-content: center;        align-items:center;    }    .module{        flex-direction: column;        justify-content: center;        align-items:center;    }    .typeLayout{        width:342px;        height:192px;    }    .numberAndType{        position:absolute;        flex-direction:row;        width:342px;        height:32px;        top:1px;        z-index:100px;    }    .playtype{        flex-direction:row;        justify-content:flex-start;        align-items:center;        background-color:#ff6c00;    }    .playtype2{        flex-direction:row;        justify-content:flex-start;        align-items:center;        background-color:#00abff;    }    .typeText{        font-size:20px;        lines:1;        color:white;        padding-right:6px;        padding-left:6px;    }    .numbers{        flex-direction:row;        justify-content:flex-start;        align-items:center;        background-color:rgba(0,0,0,0.1);    }    .zhuboModule{        position:absolute;        flex-direction:row;        justify-content:flex-start;        align-items:center;        bottom:0px;        height:38px;        width:342px;    }    .zhuboImg{        width:38px;        height:38px;        border-radius:19px;        margin-left:12px;        margin-right:12px;    }    .zhuboName{        font-size:26px;        color:white;        text-align:center;        lines:1;        text-overflow:ellipsis;    }    .img{        width:342px;        height:192px;        z-index:98px;    }    .name{        width:342px;    }    .palytext{        font-size:28px;        color:#333333;        margin-top:12px;        lines:1;        text-overflow:ellipsis;    }</style><script>    module.exports = {        data: function () {            return {                list:[                  [{imgUrl:'http://img.alicdn.com/bao/uploaded/i4/2968205213/TB2gam5agwjyKJjSspeXXXXZXXa_!!2968205213.jpg',text:'新手卖家快速引流78900000000000000099',isZhibo:'1',typeText:'直播中',numberText:'299人观看',zhuboName:'老王'},{imgUrl:'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg',text:'淘宝运行快速实战',isZhibo:"1",typeText:"直播中",numberText:"5442人观看",zhuboName:'老王'}],                  [{imgUrl:'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg',text:'323',typeTime:'预告 12:00',zhuboName:'老王'},{imgUrl:'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg',text:'4444444444444444',typeTime:'预告 14:00',zhuboName:'老王'}],                ]            }        }    }</script>