微信小程序开发左右栏效果示例代码
更新时间：2019-05-20 09:54:55 艾伦转载。
本文通过一个简单的例子来简单描述一下微信小程序开发中左右栏功能的实现，主要涉及-view、列表数据绑定、简单样式等，感兴趣的朋友关注小编看吧
本文以一个简单的例子来简单描述一下微信小程序开发中左右栏功能的实现，主要涉及-view、列表数据绑定、简单样式等。属于初级介绍性内容，仅供参考用于学习和分享。.
概述
在微信小程序开发中，左右栏（左边有分类，右边有详情微信小程序开发之图片等比例缩放，然后联动）是一种常见的布局方式，多用于点餐、冷饮店、外卖、和其他类似的商场。
布局分析
布局分析图如下：
涉及知识点
?-view 可滚动的视图区域。使用垂直滚动时，需要给定一个固定的高度，通过WXSS设置。组件属性的长度单位默认为px，从2.4.0开始支持传入单位（rpx/px）。
?-y 是否允许垂直滚动，默认。
?-into-view 值应该是某个子元素 id（id 不能以数字开头）。设置滚动哪个方向，滚动到哪个方向的元素（动态更新该属性的值实现左右联动）。
?查看基本控制。
?- 设置指定按下的样式类。-="none" 时，没有点击状态效果。
?wx:for 使用组件上的 wx:for 控件属性绑定数组，以使用数组中每个项目的数据重复呈现组件。默认情况下，数组当前项的下标变量名默认为item，数组当前项的变量名默认为item。
?='' 绑定组件的点击事件，不带括号。
示例效果图
示例渲染如下所示：
核心代码
WXML 代码如下：
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布局如下，其中主要使用box布局(:flex; flex-: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; }
总结
以上是小编介绍的微信小程序开发左右栏效果示例代码。我希望它对你有帮助。如有任何问题，请给我留言，小编会及时回复您。非常感谢您对德牛网站的支持！
如果您觉得本文对您有帮助，欢迎转载，请注明出处，谢谢！