微信小程序开发之左右分栏效果的实例代码


Posted in Javascript onMay 20, 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 相关文章推荐
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
javascript三种代码注释方法
Jun 02 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
微信小程序rich-text富文本用法实例分析
May 20 #Javascript
bootstrap中的导航条实例代码详解
May 20 #Javascript
详解小程序云开发数据库
May 20 #Javascript
VUE脚手架具体使用方法
May 20 #Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 #Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 #Javascript
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
You might like
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[34:27]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第一局
2016/02/26 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
你对IPv6了解程度
2016/02/09 面试题
介绍一下write命令
2014/08/10 面试题
怎样有效的进行自我评价
2013/10/06 职场文书
前台接待岗位职责
2013/12/03 职场文书
会计专业自我鉴定
2014/02/10 职场文书
团委竞选演讲稿
2014/04/24 职场文书
促销活动总结范文
2014/04/30 职场文书
精神文明单位申报材料
2014/05/02 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
如何利用python创作字符画
2022/06/25 Python