028-86922220

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

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

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

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的梅江网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

概述

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

布局分析

布局分析图示如下:

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

涉及知识点

示例效果图

示例效果图如下所示:

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

核心代码

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布局如下,此处主要用到了盒子布局(display: flex;flex-direction: 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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站标题:微信小程序之左右布局的实现代码
本文来源:http://www.tsicrk.com/article/jecepj.html

其他资讯

让你的专属顾问为你服务

0.8493s