微信小程序> 微信小程序之左右布局-小程序上下布局-小程序界面布局

微信小程序之左右布局-小程序上下布局-小程序界面布局

浏览量:3301 时间: 来源:weixin_34025151

本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及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/view

JS代码如下:

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}备注

学而时习之,不亦说乎。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎