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


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 学习笔记(七)字符串的连接
Dec 31 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
深入浅析JavaScript中的scrollTop
Jul 11 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
js模块加载方式浅析
Aug 12 Javascript
React优化子组件render的使用
May 12 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
vue实现图片上传到后台
Jun 29 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 XML数据解析代码
2010/05/26 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
六行python代码的爱心曲线详解
2019/05/17 Python
Django的性能优化实现解析
2019/07/30 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL