本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及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代码如下:
1!--pages/show/show.wxml--2viewclass="show-info"3scroll-viewclass='left'scroll-y4viewclass="jy-item"wx:for="{{jytype}}"wx:key="id"hover-class="jy-item-hover"wx:for-item="item"bindtap='showItem'data-id="{{item.id}}"5imagesrc="{{item.url}}"/image6label{{item.name}}/label7/view8/scroll-view9scroll-viewclass='right'scroll-yscroll-into-view="{{viewId}}"10viewclass="jy-detail"wx:for="{{jydetail}}"wx:key="id"id="D-{{detail.typeid}}-{{detail.id}}"wx:for-item="detail"bindtap='showDetail'data-id="{{detail.id}}"11imagesrc="{{detail.url}}"/image12label{{detail.name}}/label13/view14/scroll-view15/viewJS代码如下:
1showItem:function(event){2varthat=this;3varviewId="D-"+event.currentTarget.dataset.id+"-"+event.currentTarget.dataset.id+"00";4that.setData({5viewId:viewId6});7console.log(viewId);8},WXSS布局如下,此处主要用到了盒子布局(display:flex;flex-direction:row;):
1.show-info{2height:100%;3display:flex;4flex-direction:row;5align-items:flex-start;6padding:10rpx0;7box-sizing:border-box;8}910.left{11width:30%;12height:100%;13display:flex;14flex-direction:column;15margin:2px;16}1718.jy-item-hover{19border:none;20}2122.right{23width:70%;24height:1200rpx;25display:flex;26flex-direction:column;27margin:2px;28}备注学而时习之,不亦说乎。