时间:2021-05-18
本文以一个简单的小例子,简述在微信小程序开发中左右分栏功能的实现方式,主要涉及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代码如下:
JS代码如下:
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;}总结
以上所述是小编给大家介绍的微信小程序开发之左右分栏效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下:效果:左右滑动可以切换展示图片代码:pages/test/test.js:Page({
企业微信小程序的开发通过企业微信小程序模拟器插件来实现,方便用户在微信开发者工具中进行企业微信小程序开发、调试和代码上传。一、开发须知开发者在使用企业微信小程序
本文实例为大家分享了微信小程序实现购物页面左右联动的具体代码,供大家参考,具体内容如下效果图:wxml{{item.typename}}{{item.typen
微信小程序利用css实现遮罩效果实例详解实现效果图:如图所示,使用css实现小程序的遮罩效果,代码如下js文件代码://index.js//获取应用实例vara
本文实例为大家分享了微信小程序云开发实现增删改查的具体代码,供大家参考,具体内容如下首先按照微信小程序官方提示创建一个快速云开发小程序大家可以点击此处下载源代码