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


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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
微信小程序实现多图上传
Jun 19 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
jQuery 选择器理解
2010/03/16 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python实现的排列组合计算操作示例
2017/10/13 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
np.random.seed() 的使用详解
2020/01/14 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
解决python运行启动报错问题
2020/06/01 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
小学毕业感言150字
2014/02/05 职场文书
大学军训感言300字
2014/03/09 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
大型活动组织方案
2014/05/10 职场文书
故宫的导游词
2015/01/31 职场文书
护理专业自荐信范文
2015/03/06 职场文书
早恋主题班会
2015/08/14 职场文书