今天需求个类似得到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

微信小程序 左右分类滚动列表的更多相关文章

  1. 微信小程序编写新闻阅读列表

    微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 ...

  2. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  3. 微信小程序实现给循环列表点击添加类(单项和多项)

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  4. 微信小程序实现给循环列表添加点击样式实例

    微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 ...

  5. [微信小程序] 微信小程序下拉滚动选择器picker绑定数据的两种方式

    小程序 picker 多列选择器 数据动态获取 需求是将各校区对应各班级的数据 以两列选择器的方式展示出来,并且可以在选择完成之后记录选结果参数. 校区数据 和 班级数据 分别是两个接口,以 校区 t ...

  6. 微信小程序之点击列表的item带参数跳转界面

    1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标, ...

  7. 微信小程序 左右分类列表

    分类界面,左边是一级目录,右边是一级目录对应的二级目录,根据这个需求,我们数据设计的结构一定是数组嵌套数组,第一个数组包含一级目录数据,嵌套的数组包含的是二级目录的数据. wxml代码: <vi ...

  8. 微信小程序scroll-view横向滚动

    官方文档给的代码复制下来发现无法滚动,没反应,使用css设置浮动属性也无效 官方没有给出css代码,横向需要设置两个css属性才行: white-space: nowrap; ----规定段落中的文本 ...

  9. 微信小程序分页加载列表

    1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <vi ...

随机推荐

  1. gitlab-ce白名单设置杜绝并发数过大引起的封ip故障

    gitlab-ce 7.9安装手札以及上篇文章的问题解决 鸣谢 感谢ruby大神===>章鱼的一路指点,才能拨开迷雾见云天! 章鱼大人: 国内Ansible部落原创翻译之一! 资深运维! ROR ...

  2. "Class does not support Automation or does not support expected interface"数据库连接错误问题分析与解决

    1,故障现象 本人编译的英文版程序在本机上运行OK,换台电脑运行,发现启动时连接数据库出错. 错误信息如下: --------------------------- Error start datab ...

  3. ubuntu 16.04 TLS 安装VNC

    安装 #autocuftsel 用于vnc两段的复制粘贴 sudo apt-get install autocutsel 安装 vncserversudo apt-get install --no-i ...

  4. ACM-ICPC 2018 沈阳赛区现场赛 E. The Kouga Ninja Scrolls (切比雪夫距离+线段树)

    题目链接: 题意:在二维平面上有 n 个人,每个人有一个位置(xi, yi)和门派 ci,m 个操作:①改变第 k 个人的位置:②改变第 k 个人的门派:③询问区间[l,r]之间不同门派的两个人的最大 ...

  5. 网络和Web编程

    一.以客户端的形式同HTTP服务交互 (1)使用urllib.request模块发送HTTP GET请求 from urllib import request,parse url = 'http:// ...

  6. focus([[data],fn]) 当元素获得焦点时,触发 focus 事件。

    focus([[data],fn]) 概述 当元素获得焦点时,触发 focus 事件.直线电机选型 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持f ...

  7. Git Clone 的时候遇到 Filename too long 错误

    在对某些仓库进行 Git Clone 的时候遇到了 Filename too long 的错误提示. 错误提示如下图: 可以有下面的一些解决办法: 可以有下面的一些解决办法: 在 Git bash 中 ...

  8. 【概率论】2-1:条件概率(Conditional Probability)

    title: [概率论]2-1:条件概率(Conditional Probability) categories: Mathematic Probability keywords: Condition ...

  9. HTML基础要点归纳

    一.开发环境 常用的HTML编辑器有Sublime Text.Hbuild.Dreamweare.以及vs code.pycharm等都可以.我目前在用的就是Sublime text3和Hbuild两 ...

  10. 1632:【 例 2】[NOIP2012]同余方程

    #include<bits/stdc++.h> #define ll long long using namespace std; void Exgcd(ll a,ll b,ll & ...