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


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中children与find之间的区别详细解析
Nov 29 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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数据库操作面向对象的优点
2006/10/09 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
js资料toString 方法
2007/03/13 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
js中this用法实例详解
2015/05/05 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python的迭代器和生成器
2015/07/29 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
护理职业应聘自荐书
2013/09/29 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
机关出纳岗位职责
2014/04/03 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python