微信小程序之左右布局的实现代码


Posted in Javascript onDecember 13, 2019

本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及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代码如下:

<!--pages/show/show.wxml-->
<view class="show-info">
 <scroll-view class='left' scroll-y>
  <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}}">
   <image src="{{item.url}}"></image>
   <label>{{item.name}}</label>
  </view>
 </scroll-view>
 <scroll-view class='right' scroll-y scroll-into-view="{{viewId}}">
  <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}}">
   <image src="{{detail.url}}"></image>
   <label>{{detail.name}}</label>
  </view>
 </scroll-view>
</view>

JS代码如下:

showItem: function(event) {
  var that=this;
  var viewId = "D-" + event.currentTarget.dataset.id + "-" + event.currentTarget.dataset.id+"00";
  that.setData({
   viewId: viewId
  });
  console.log(viewId);
 },

WXSS布局如下,此处主要用到了盒子布局(display: flex;flex-direction: row;):

.show-info {
 height: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
 padding: 10rpx 0;
 box-sizing: border-box;
}

.left {
 width: 30%;
 height: 100%;
 display: flex;
 flex-direction: column;
 margin:2px;
}

.jy-item-hover{
 border: none;
}

.right {
 width: 70%;
 height: 1200rpx;
 display: flex;
 flex-direction: column;
 margin: 2px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
javascript基本算法汇总
Mar 09 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JS实现的随机排序功能算法示例
Jun 09 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
You might like
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js对象基础实例分析
2015/01/13 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
python数据处理实战(必看篇)
2017/06/11 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
生物科学专业个人求职信范文
2013/12/07 职场文书
生物学专业求职信
2014/07/23 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle