资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

微信小程序之左右布局的实现代码-创新互联

本文以一个简单的小例子,简述在微信小程序开发中左右布局功能的实现方式,主要涉及scroll-view ,列表数据绑定,及简单样式等内容,仅供学习分享使用。

创新互联建站是专业的贾汪网站建设公司,贾汪接单;提供成都网站设计、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行贾汪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

概述

微信小程序开发中,左右分栏(左边显示分类,右边显示明细,然后进行联动)是一种常见的布局方式,多应用于点餐,冷饮店,外卖,以及其他类似的商城。

布局分析

布局分析图示如下:

微信小程序之左右布局的实现代码

涉及知识点

  • 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代码如下:



 
  
   
   
  
 
 
  
   
   
  
 

网页名称:微信小程序之左右布局的实现代码-创新互联
URL标题:http://www.cdkjz.cn/article/cdhjpc.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220