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


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 相关文章推荐
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
javascript与有限状态机详解
May 08 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
vant中的toast层级改变操作
Nov 04 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/10/20 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
五段实用的js高级技巧
2011/12/20 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 移动光标位置的方法
2019/01/20 Python
深入了解python列表(LIST)
2020/06/08 Python
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
秋天的图画教学反思
2014/05/01 职场文书
食品工程专业求职信
2014/06/15 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2015年新学期寄语
2015/02/26 职场文书
药品开票员岗位职责
2015/04/15 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2016年记者节感言
2015/12/08 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle