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


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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jquery的extend和fn.extend的使用说明
Jan 09 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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实现时间轴函数代码
2011/10/08 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
JS交换变量的方法
2015/01/21 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python实现五子棋小程序
2019/06/18 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
公司培训欢迎词
2014/01/10 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2015年护士节慰问信
2015/03/23 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Window server中安装Redis的超详细教程
2021/11/17 Redis