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

最新推荐文章于 2024-08-23 09:05:38 发布

dangyao92

最新推荐文章于 2024-08-23 09:05:38 发布

阅读量2.8k

点赞数 1

分类专栏： android weex 文章标签： weex gridview 网格布局前端

本文链接：https://blog.csdn.net/hnytdangyao/article/details/78261497

版权

本文介绍了如何在Weex中利用Vue 2.0版本实现GridView的网格布局，通过模拟数据源控制行数和列数，详细解析了布局代码，并展示了浮层效果的实现，利用渲染机制在布局和样式上创建浮层效果。

摘要由CSDN通过智能技术生成

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

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

一.概述

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

demo效果图

二.实现方式

现在使用的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=