以一个简单的例子，简要描述了微信小程序开发中左右栏功能的实现，主要涉及滚动查看、列表数据绑定、简约风格等。这是初学者的内容，仅供学习和分享。

总结

在微信小程序的开发中，左右列(左边分类，右边明细，联动)是常见的布局模式，多用于点餐、冷饮店、外卖等类似的商场。

布局分析

布局分析图如下：

涉及的知识点

滚动视图可滚动视图区域。当使用垂直滚动时，有必要给滚动视图一个固定的高度，并通过WXSS设置高度。组件属性的长度单位默认为px，从2.4.0开始支持传入单位(rpx/px)。默认情况下，scroll-y是否允许垂直滚动为false。滚动到视图值应该是子元素id(id不能以数字开头)。设置滚动哪个方向，然后滚动到哪个方向的元素(动态更新该属性的值，实现左右联动)。视图基础控件。悬停类设置指定要按下的样式类。当悬停-class='none '时，没有点击效果。Wx:for通过对控件属性使用wx:来绑定组件上的数组，也就是说，组件可以通过使用数组中每个项的数据来重复呈现。默认数组当前项的下标变量名默认为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 ' bind tap=' show item ' data-id=' { { item . id } } ' image src=' http : { { item

showItem:函数(事件){ var=this；var view id=' D '-event . current target . dataset . id '-' event . current target . dataset . id ' 00 '；that . setdata({ Viewid : Viewid })；console . log(ViewId)；}，WXSS布局如下，这里主要采用的是盒子布局(display: flexflex-direction : row；):show-info { height : 100%；display: flexflex-direction : row；align-items : flex-start；padd : 10 rpx 0；盒子尺寸：边框盒子；}.左侧{宽度：30%；高度： 100%；display: flexflex-direction:柱；margin:2px}.jy-item-hover { border : none；}.右侧{宽度：70%；height: 1200rpxdisplay: flexflex-direction:柱；margin: 2px}摘要

以上是边肖介绍的微信小程序开发左右栏效果的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！