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


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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
Python中zip()函数用法实例教程
2014/07/31 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python变量不能以数字打头详解
2016/07/06 Python
pycharm设置注释颜色的方法
2018/05/23 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
web字体加载方案优化小结
2019/11/29 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
购房协议书
2014/04/11 职场文书
先进工作者事迹材料
2014/12/23 职场文书
节水宣传标语口号
2015/12/26 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python