微信小程序之左右布局
本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用。
概述
在微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城。
布局分析
布局分析图示如下:
涉及知识点
- scroll-view 可滚动视图区域。使用竖向滚动时,需要给<scroll-view>一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
- scroll-y 是否允许纵向滚动,默认false。
- scroll-into-view 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素(动态更新该属性的值,实现左右联动)。
- view 基础控件。
- hover-class 设置指定按下去的样式类。当 hover-class="none" 时,没有点击态效果。
- wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
- bindtap='showItem' 绑定组件的单击事件,不加括弧。
示例效果图
示例效果图如下所示:
核心代码
WXML代码如下:
1 <!--pages/show/show.wxml--> 2 <view class="show-info"> 3 <scroll-view class='left' scroll-y> 4 <view class="jy-item" wx:for="{{jytype}}" wx:key="id" hover-class="jy-item-hover" wx:for-item="item" bindtap='showItem' data-id="{{item.id}}"> 5 <image src="{{item.url}}"></image> 6 <label>{{item.name}}</label> 7 </view> 8 </scroll-view> 9 <scroll-view class='right' scroll-y scroll-into-view="{{viewId}}"> 10 <view class="jy-detail" wx:for="{{jydetail}}" wx:key="id" id= "D-{{detail.typeid}}-{{detail.id}}" wx:for-item="detail" bindtap='showDetail' data-id="{{detail.id}}"> 11 <image src="{{detail.url}}"></image> 12 <label>{{detail.name}}</label> 13 </view> 14 </scroll-view> 15 </view>
JS代码如下:
1 showItem: function(event) { 2 var that=this; 3 var viewId = "D-" + event.currentTarget.dataset.id + "-" + event.currentTarget.dataset.id+"00"; 4 that.setData({ 5 viewId: viewId 6 }); 7 console.log(viewId); 8 },
WXSS布局如下,此处主要用到了盒子布局(display: flex;flex-direction: row;):
1 .show-info { 2 height: 100%; 3 display: flex; 4 flex-direction: row; 5 align-items: flex-start; 6 padding: 10rpx 0; 7 box-sizing: border-box; 8 } 9 10 .left { 11 width: 30%; 12 height: 100%; 13 display: flex; 14 flex-direction: column; 15 margin:2px; 16 } 17 18 .jy-item-hover{ 19 border: none; 20 } 21 22 .right { 23 width: 70%; 24 height: 1200rpx; 25 display: flex; 26 flex-direction: column; 27 margin: 2px; 28 }
备注
学而时习之,不亦说乎。
微信小程序之左右布局相关推荐
- 微信小程序沉浸式布局
微信小程序沉浸式布局
- 微信小程序解决flex布局,最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题 需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐 实际效果与代码如下: wxml <view class="con- ...
- 微信小程序之九宫格布局方案
2018转眼即将逝去了,由于近期在弄一个小程序的项目的原因,今天在这里记录一下小程序之九宫格布局方案,以备后期需要和相关知识温习. 对于整个小程序项目,原生开发小程序的方式这里就不多说了,官方有确切的 ...
- 微信小程序,横向布局,纵向布局
1.概述 从Android开发过来的,所以对于wxml 这剪裁至html 的布局还是比较灵活和复杂.Android里是把方向orientation 分为 horizontal 和vertical 2. ...
- 微信小程序flex弹性布局
微信小程序常用布局为flex.使用flex模型来提高页面布局效率,当页面需要适应不同屏幕大小以及设备类型,该模型一确保元素在恰当的位置. 属性 解释 默认值 其它值 flex-direction 排列 ...
- 微信小程序开发 — Flex布局
前言 微信小程序页面布局方式采用的是Flex布局. Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局. Flex布局提供了元素在容器中的对齐,方向以及顺序 ...
- 微信小程序开发之布局奇盈绝技
1.微信小程序对flex流式布局支持的相当不错,甚至有些地方可以使用flex进行修复操作 如在设置image这个标签的时候,内设有个10rpx的底部空间,假如这个空间背景为黑色,那么10rpx这个底部 ...
- 微信小程序----vant_栅格布局
微信小程序:vant组件库layout布局 1.wxml文件 <!--Layout布局_页面小按钮--> <view class="tubiao"> < ...
- 微信小程序高度自适应布局
上图是我想要实现的效果,图片和文字描述区域各占屏幕的50%:在微信小程序中的通常做法是内联样式控制. <!--index.wxml--> <view class="&quo ...
最新文章
- Oracle日期处理
- 全面了解Nginx到底能做什么
- chromebook刷机_如何将网站添加到您的Chromebook架子上
- Scheduled SQL: SLS 大规模日志上的全局分析与调度
- 教你在Ubuntu上体验Mac风格
- python数据如何保存到excel中
- 计算机科学与技术收获,工作人员参加计算机科学与技术在职研究生学习收获大吗?...
- Wings与parasoft c++ test在单元测试用例自动生成能力的比对
- android 一位小数_android如何保留小数点后x位数字
- JAVA-工作流-Activiti7入门demo
- 理解稀疏编码sparse coding
- 范成法加工matlab_基于Matlab的渐开线齿轮的范成法仿真 (2)
- 互联网中的裂变是什么?
- 每一个成年男人在算法中都是好色之徒
- 举个栗子!Tableau技巧(59):学做两个集合的维恩图(文氏图)Venn diagram
- echarts (二) 之canvas设置地图背景图
- MySQL必知必会总结
- python_17(sql)
- 应用程序无法正常启动(0xC0000142)
- xdl Java_JAVA和C++区别