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


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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
js+css实现打字效果
Jun 24 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
PHP5.3新特性小结
2016/02/14 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
js微信分享接口调用详解
2019/07/23 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python创建日历实例
2014/08/21 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python 调用Google翻译接口的方法
2020/12/09 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
Python中Qslider控件实操详解
2021/02/20 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
医药专业推荐信
2013/11/15 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
MySQL查询学习之基础查询操作
2021/05/08 MySQL
centos7安装mysql5.7经验记录
2022/05/02 Servers