Weex实现GridView的网格布局以及浮层效果
2017-10-17 15:58
531 查看
Weex实现GridView的网格布局以及浮层效果
转载请注明出处:http://blog.csdn.net/hnytdangyao/article/details/78261497.本文出自 [ 党耀的博客 ]
目录
Weex实现GridView的网格布局以及浮层效果目录
一概述
二实现方式
代码解析
源码
因为项目需要,在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>
相关文章推荐
- Android网格布局GridView实现漂亮的多选效果
- Android网格布局(GridView)---实现漂亮的多选效果
- Android网格布局(GridView)---实现漂亮的多选效果
- (android控件)界面布局实现GridView(网格效果)
- css实现遮罩效果以及帧布局使用
- Android之ViewPager+GridView实现仿美团首页导航栏布局分页效果
- Android GridView不改变背景色实现网格线效果
- Andriod GridView不改变背景色实现网格线效果
- RecyclerView 实现多种布局(上半部Gridview样式,下半部Listview样式)以及多种数据类型实现不同布局
- Android 利用ViewPager+GridView实现首页导航栏布局分页效果
- Android利用ViewPager+GridView,实现网格布局(功能列表)并能水平滑动
- 高仿微信菜单,主布局层次架构,以及实现菜单,动画效果
- GridView和SimpleAdapter实现网格布局
- ViewPager+GridView实现首页导航栏布局分页效果
- Android网格布局实现--GridView
- UITableView实现网格视图效果GridView
- 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性、网格、瀑布流效果演示
- RecylerView(GridView布局)实现充值界面效果
- css实现九宫格布局以及边框效果
- Android HorizontalScrollView结合GridView实现类似网易新闻那样的栏目滑动效果