天天看點
傳回

Weex實作GridView的網格布局以及浮層效果Weex實作GridView的網格布局以及浮層效果

Weex實作GridView的網格布局以及浮層效果

轉載請注明出處:http://blog.csdn.net/hnytdangyao/article/details/78261497.

本文出自 [ 黨耀的部落格 ]

目錄

  • Weex實作GridView的網格布局以及浮層效果
      • 目錄
    • 一概述
    • 二實作方式
      • 代碼解析
      • 源碼 
因為項目需要，在9月份自學了前端語言和weex相關的一系列東西，并初次使用了weex來改版首頁，其中的踩坑經曆後面會做一個分享出來，下面是正文。

一.概述

weex中提供了list标簽用來展示清單頁的布局，類似Android中的listview。但是沒有類似gridview的網格布局，是以就需要在布局和資料上做操作。效果圖如下：

Weex實作GridView的網格布局以及浮層效果Weex實作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:px;
        padding-left:px;
        padding-right:px;

    }
    .item{
        flex:;
        justify-content: center;
        align-items:center;

    }
    .module{
        flex-direction: column;
        justify-content: center;
        align-items:center;

    }
    .typeLayout{
        width:px;
        height:px;

    }
    .numberAndType{
        position:absolute;
        flex-direction:row;
        width:px;
        height:px;
        top:px;
        z-index:px;
    }
    .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:px;
        lines:;
        color:white;
        padding-right:px;
        padding-left:px;

    }
    .numbers{
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        background-color:rgba(,,,);
    }
    .zhuboModule{
        position:absolute;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        bottom:px;
        height:px;
        width:px;

    }
    .zhuboImg{
        width:px;
        height:px;
        border-radius:px;
        margin-left:px;
        margin-right:px;
    }
    .zhuboName{
        font-size:px;
        color:white;
        text-align:center;
        lines:;
        text-overflow:ellipsis;
    }

    .img{
        width:px;
        height:px;
        z-index:px;
    }
    .name{
        width:px;
    }
    .palytext{
        font-size:px;
        color:#333333;
        margin-top:px;
        lines:;
        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>
android weex GridView 網格布局 前端
上一篇: GridControl屬性以及DEV其他設定屬性
下一篇: Android應用中五種常用的menu

繼續閱讀