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


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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
javascript preload&amp;lazy load
May 13 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
JavaScript订单操作小程序完整版
Jun 23 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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文件上传实例详解!!!
2007/01/02 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
使用jQuery实现购物车
2020/10/29 jQuery
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
django之常用命令详解
2016/06/30 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
详解python中各种文件打开模式
2020/01/19 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
会计自我鉴定
2014/02/04 职场文书
小学生新年寄语
2014/04/03 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2014年文员工作总结
2014/11/18 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
高质量“欢迎词”
2019/04/03 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫