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


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 相关文章推荐
js实现的网页颜色代码表全集
Jul 17 Javascript
javascript 面向对象编程基础:封装
Aug 21 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
手把手教你实现 Promise的使用方法
Sep 02 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
jQuery示例收集
2010/11/05 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python pickle模块用法实例
2015/04/14 Python
星球大战与Python之间的那些事
2016/01/07 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python count函数使用方法实例解析
2020/03/23 Python
简述python Scrapy框架
2020/08/17 Python
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
给物业的表扬信
2014/01/21 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
个人委托书范本
2014/09/13 职场文书
单位租房协议书范本
2014/12/04 职场文书
党支部评议意见
2015/06/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
2016年少先队活动总结
2016/04/06 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技