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


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 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
js微信分享实现代码
Oct 11 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
canvas实现贪食蛇的实践
Feb 15 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程序员工具
2008/05/26 PHP
php 页面执行时间计算代码
2008/12/04 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
php object转数组示例
2014/01/15 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
django框架使用方法详解
2019/07/18 Python
openCV提取图像中的矩形区域
2020/07/21 Python
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
倡议书格式模板
2014/05/13 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
Python中的变量与常量
2021/11/11 Python