php小程序 100行左右,微信小程序 左右分类滚动列表

今天需求个类似得到app分类的功能，效果如图：

左右分别滚动，互不干扰，先把简单的布局和样式搭好。

左侧分类

右侧顶部分类

右侧列表

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

简单的效果已经出来了，往里面填充数据就好了。。

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

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

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

方案1:直接使用微信小程序提供的 “scroll-view " 组件.

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

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

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

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

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

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

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

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

微信小程序 左右分类列表

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

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

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

微信小程序分页加载列表

1.假设加载的数据为 2.wxml

随机推荐

在 Linux 上使用 Jexus + Mono 建立 Asp.Net 网站.

godaddy 买了个net空间,一点也不好用. 几个G的数据, 上传数据只有几kb , 想用 ssh 登录上去用 wget 下载,也不行 windows的主机貌似没有 ssh 功能... 后来实在忍 ...

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

phonegap_android配置文档

百度文库 http://wenku.baidu.com/link?url=C9l51orfpSrjMEK69-Yjh9hmmaqQj0DicfnYs5FSRhkdy8S62x1aBBwstFH-tJ9 ...

多选出差同事id,拼接,去掉最后逗号

===========方法1 substr() ,永远都是.(第一个参数)开始位置.(第二个参数)截取个数 ,负数表示都后面开始数 substr($data['members'],0,strlen($ ...

修改linux的系统时间

可以使用date命令.date用于打印或设置系统日期和时间.设置系统时间需要root权限.用法示例:设置系统日期成2015年08月13日,这样会把具体时间设置清空成00:00:00$ sudo dat ...

pandas常用函数之diff

diff函数是用来将数据进行某种移动之后与原数据进行比较得出的差异数据,举个例子,现在有一个DataFrame类型的数据df,如下: index value1 A 0 B 1 C 2 D 3 如果执行 ...

linux子系统ubuntu16.04安装使用xrdp当远程桌面

参考文献:https://icytown.com/windows/windows-subsystem-for-linux-gui-xubuntu/ https://jingyan.baidu.com/ ...

有状态(Stateful)与无状态(Stateless)

1.有状态(Stateful): 有数据存储功能.有状态对象(Stateful Bean),就是有实例变量的对象,可以保存数据,类里面有成员变量,而且成员变量是可变的,是非线程安全的.在不同方法调用间 ...

【leetcode】121-Best Time to Buy and Sell Stock

problem 121. Best Time to Buy and Sell Stock code class Solution { public: int maxProfit(vector