十分钟掌握微信小程序开发:高仿电商产品分类功能
每天分享职场干货、职场案例、和领导同事相处技巧,软件开发心得体会,项目管理感悟。
高仿电商产品分类功能。
效果:
page, .main {
height: 100%;
}
.categroy-left {
float: left;
width: 20%;
height: 100%;
border-right: 1px solid #ddd;
box-sizing: border-box;
background-color: #f5f5f5;
font-family: "Helvetica Neue",
"Hiragino Sans GB",
"Microsoft YaHei",
"9ED14F53",
Arial,
sans-serif;
font-size: 32rpx;
}
.categroy-left .cate-list {
height: 90rpx;
line-height: 90rpx;
text-align: center;
border-left: 3px solid #fff;
}
.categroy-left .cate-list.on {
color: #3aa4ff;
border-color: #3aa4ff;
}
.categroy-right {
float: right;
width: 80%;
height: 100%;
overflow: hidden;
}
.cate-box {
height: 100%;
padding: 40rpx;
box-sizing: border-box;
}
.cate-title {
position: relative;
height: 30rpx;
padding: 30rpx 0 55rpx;
text-align: center;
color: #3aa4ff;
font-size: 28rpx;
}
这是{}页面
category.js
Page({
data: {
category: [
{ name: '推荐分类', id: 'a0' },
{ name: '男装', id: 'a1' },
{ name: '女装', id: 'a2' },
{ name: '女内衣', id: 'a3' }
],
detail: [
{
"id": "a0",
"cate": "推荐分类",
"detail": []
},
{
"id": "a1",
"cate": "男装",
"detail": []
},
{
"id": "a2",
"cate": "女装",
"detail": []
},
{
"id": "a3",
"cate": "女内衣",
"detail": []
}
],
curIndex: 0,
isScroll: false,
toView: 'a0'
},
switchTab(e) {
const self = this;
this.setData({
isScroll: true,
})
setTimeout(function () {
self.setData({
})
}, 100)
setTimeout(function () {
self.setData({
isScroll: false
})
}, 100)
}
})
【END】
- 一文读懂如何用 Python 实现6种排序算法
- 5 个很好的 Python 面试题
- Python部署手记:django, gunicorn, virtualenv, circus, nginx
- Python图像处理库:Pillow 初级教程
- 陷阱!python参数默认值
- 怎么样才算是精通 Python?
- 教你一招 | Python实现无向图最短路径
- 教你一招 | Python装饰器的另类用法
- 如何拿到半数面试公司Offer——我的Python求职之路
- Python编程语言发展简史
- 学完Python基础知识后,你真的会python吗?
- 一个人的武林:内网渗透测试思路(二)
- Python数据分析之股票实战
- 这货不是电源:硬件渗透测试平台 – Power Pwn
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 微信小程序【事件绑定】入门一篇就搞定
- 一个后端狗的 Vue 笔记【入门级】
- 这才是现代C++单例模式简单又安全的实现
- Linux 学习笔记(1) 查看文件内容
- Python从入门到熟练(3):第一个程序
- 数学系的概率论和我们的不太一样。。。
- 如何实现一个优雅的Python的Json序列化库
- 还在从零开始搭建项目?手撸了款快速开发脚手架!
- Node.js 中的 require 是如何工作的?
- Ajax请求携带Cookie
- 关于kubernetes垃圾回收那点事
- 强化学习笔记11:工程师看强化学习
- 强化学习笔记10:经典游戏示例 classic games
- RL实践3——为Agent添加Policy、记忆功能
- 强化学习仿真环境搭建入门Getting Started with OpenAI gym