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


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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
Mar 14 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
js实现图片上传并预览功能
Aug 06 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
深入php内核之php in array
2015/11/10 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python 字符串与数字输出方法
2018/07/16 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
医院护士求职自荐信格式
2013/09/21 职场文书
三好学生自我鉴定
2013/12/17 职场文书
领导的自我鉴定
2013/12/28 职场文书
两只小狮子教学反思
2014/02/05 职场文书
高校教师自荐信范文
2014/03/13 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
就业协议书怎么填
2014/09/15 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
linux下安装redis图文详细步骤
2021/12/04 Redis