微信小程序 左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图:

左右分别滚动,互不干扰,先把简单的布局和样式搭好。
<view class="page">
<view class="flex_row">
<view class="nav_left" >
<view style="height:1500rpx;">左侧分类</view>
</view>
<view class="nav_right">
<view class="nav_right_top">右侧顶部分类</view>
<scroll-view class="nav_right_list" scroll-y="true">
<view style="height:1200rpx;">右侧列表</view>
</scroll-view>
</view>
</view>
</view>
.flex_row{display: flex;flex-direction: row;}
.nav_left{width: 25%;height:100vh;overflow-y:auto; }
.nav_right{width: 75%;position: relative;}
.nav_right .nav_right_top{padding-top:20rpx;position: fixed;top:;right:;width: 75%;height:80rpx;font-size:30rpx;
border-bottom: 1px solid #dedede;display:flex;flex-direction:row;white-space: nowrap;background: #fff;z-index:}
.nav_right_list{margin-top:80rpx;height:calc(100vh - 80rpx);}
简单的效果已经出来了,往里面填充数据就好了。。
下面的实例写在另篇文章里,链接: https://www.cnblogs.com/joe235/p/11464841.html
微信小程序 左右分类滚动列表的更多相关文章
- 微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...
- 解决微信小程序ios端滚动卡顿的问题
方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...
- 微信小程序实现给循环列表点击添加类(单项和多项)
在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...
- 微信小程序实现给循环列表添加点击样式实例
微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...
- [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式
小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...
- 微信小程序之点击列表的item带参数跳转界面
1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...
- 微信小程序 左右分类列表
分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据. wxml代码: <vi ...
- 微信小程序scroll-view横向滚动
官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...
- 微信小程序分页加载列表
1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <vi ...
随机推荐
- ubuntu 18.04 enp8s0更改网口名称为eth0
尝试各种方法均不成功,后参考如下方法终于成功: 方法一:单纯改网卡名,重启后显示原网卡名. 如我的网卡名是enp8s0 >> ip link set enp8s0 down //关闭网卡 ...
- nginx配置跨域之后每次访问会发送两次请求
公司项目从前后端不分离转到前后端分离 首先遇到的问题就是前后端分离的时候跨域的问题 但是当跨域成功配置并且能访问成功的时候发现 每次客户端的请求都会发送两次 第一次是OPTIONS的请求,然后才是正常 ...
- 调整swt table的行高
table.addListener(SWT.MeasureItem, new Listener() { public void handleEvent(Event event) { // 设置行高度 ...
- Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_unicode_ci,IMPLICIT) for operation '<>'
1.问题 今天又在mysql中遇到了,吐血. 2.解决方案 SQL最后加上 COLLATE utf8mb4_unicode_ci SELECT t2.cust_id as cust_id_ex,t1. ...
- LOJ2265. 「CTSC2017」最长上升子序列
题意:中文题意很清楚 LOJ2263 分析: 根据Dilworth定理,最小链覆盖=最长反链. 问题转化为求 $k$ 个最小不上升序列能覆盖的最大数的个数. 参考链接: 1. https://blog ...
- [Google Guava] 10-散列
原文链接 译文链接 译者:沈义扬 概述 Java内建的散列码[hash code]概念被限制为32位,并且没有分离散列算法和它们所作用的数据,因此很难用备选算法进行替换.此外,使用Java内建方法实现 ...
- Appium自动化测试教程-自学网-monkey参数
monkey 参数 参数分类 · 常规类参数 · 事件类参数 · 约束类参数 · 调试类参数 常规类参数 常规类参数包括帮助参数和日志信息参数.帮助参数用于输出Monkey命令使用指导:日志信息参数将 ...
- JSON格式数据
1. 基础知识 1. 什么是JSON格式? JSON格式是现在网站数据交互的标准数据格式,写入标准. 取代原来的XML:符合JS原生语法,可以被直接解析,不需要额外的解析文件. 书写简单,一目了然 2 ...
- 51 Nod 1700 首尾排序法
1700 首尾排序法 有一个长度为n的数组 p1, p2, p3, ⋯, pnp1, p2, p3, ⋯, pn ,里面只包含1到n的整数,且每个数字都不一样.现在要对这个数组进行从小到大排序,排序的 ...
- P3469 割点的应用
https://www.luogu.org/problem/P3469 题目就是说封锁一个点,会导致哪些点(对)连不通: 用tarjan求割点,如果这个点是割点,那么不能通行的点对数就是(乘法法则)儿 ...