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


Posted in Javascript onDecember 13, 2019

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

<!--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" bindtap='showItem' data-id="{{item.id}}">
   <image src="{{item.url}}"></image>
   <label>{{item.name}}</label>
  </view>
 </scroll-view>
 <scroll-view class='right' scroll-y scroll-into-view="{{viewId}}">
  <view class="jy-detail" wx:for="{{jydetail}}" wx:key="id" id= "D-{{detail.typeid}}-{{detail.id}}" wx:for-item="detail" bindtap='showDetail' data-id="{{detail.id}}">
   <image src="{{detail.url}}"></image>
   <label>{{detail.name}}</label>
  </view>
 </scroll-view>
</view>

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
php 修改密码实现代码
May 24 Javascript
React组件生命周期详解
Jul 03 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
微信小程序点击保存图片到本机功能
Dec 13 #Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 #Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 #Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 #Javascript
You might like
PHP中文汉字验证码
2007/04/08 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
php自动适应范围的分页代码
2008/08/05 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
python每天定时运行某程序代码
2019/08/16 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
厂长助理岗位职责
2013/12/27 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers