微信小程序之 catalog 切换
组件名称:catalog
组件属性:catalogData,type:String
组件描述:这是一个子组件,数据从父组件中传递
效果图:
catalog 目录为多个,使用 scroll-view 容器。但是在当前组件中,只写每个 catalog 数据展示并实现 catalog 切换效果,这样会保证当前组件的最小粒度。
分析当前组件可能用到的属性为:组件名称,切换状态,未选中状态,切换点击方法。
<block wx:for="{{catalogData}}" wx:key="id" wx:for-item="item" class="item">
<view class="scroll-view-item catalog-title {{curIndex == index ? 'catalog-active' : 'catalog-normal'}}" data-index="{{index}}" catchtap="goIndex">{{item.catalog}}</view>
</block>
curIndex 为点击当前 catalog 时获取的 index
index 为 catalogData 这个数组默认的 index, 也就是 data-index 的值
goIndex 为点击当前 catalog 的方法,通过点击获取到 curIndex 的值 通过判断当前 curIndex 是否与数组中的 index 是否相等,如果相等,则给当前 catalog 添加选中的样式 catalog-active,否则添加 catalog-normal。
更新默认 curIndex 的默认值
Component({
/**
* 组件的属性列表
*/
properties: {
catalogData:{
type: Array,
}
}, /**
* 组件的初始数据
*/
data: {
curIndex:0
}, /**
* 组件的方法列表
*/
methods: {
goIndex(event) {
let nextIndex = event.currentTarget.dataset.index;
this.setData({
curIndex: nextIndex
}) console.log(this.data.curIndex + '=' + nextIndex);
},
}
})
微信小程序之 catalog 切换的更多相关文章
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 微信小程序开发--路由切换,页面重定向
这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigat ...
- 微信小程序左右滑动切换图片酷炫效果
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...
- 微信小程序左右滑动切换图片酷炫效果(附效果)
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...
- 微信小程序 主题皮肤切换(switch开关)
示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...
- 微信小程序标签页切换
WXML中: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab== ...
- 微信小程序组件-----城市切换
直接上地址,有需要的直接下载,使用: https://github.com/chenjinxinlove/citySelect
随机推荐
- Mybatis的逆向工程,自动生成代码(Mapper,xml,bean)
步骤: 1. 新建一个Maven项目: 然后导入maven依赖: <dependencies> <dependency> <groupId>org.mybatis& ...
- Spring Boot 2 + jpa + mysql例子
Spring Data框架为数据访问提供了一个通用的模型,无论访问哪种数据库,都可以使用同样的方式,主要有以下几个功能:(1)提供数据与对象映射的抽象层,同一个对象,可以被映射为不同数据库的数据:(2 ...
- Flask框架后端开发常见错误处理
1.ValueError: urls must start with a leading slash 这个错误原因可能发生在所有路由相关地方,少加了一个'/'造成的. 2.ImportError: c ...
- java8-03-Lambda表达式总结
Lambda 表达式的语法格式 基本结构 () -> {} 左侧 参数列表 右侧 方法体 (Lambda体) 1.无 ...
- Codeforces Round #583 (Div. 1 + Div. 2, based on Olympiad of Metropolises)
传送门 A. Optimal Currency Exchange 枚举一下就行了. Code #include <bits/stdc++.h> using namespace std; t ...
- Java使用JDBC连接SQL Server数据库|实现学生成绩信息系统
Java实验四 JDBC 使用SQL Server数据库或者MySQL数据库各自的客户端工具,完成如下任务: (1)创建数据库students: (2)在数据students中创建表scores,包括 ...
- Redux使用
思想 应用中所有的state都以一个对象树的形式储存在一个单一的store中.唯一能改变state的办法是触发action,一个描述发生什么的对象.为了描述action如何改变state树,需要编写r ...
- linux下的set, export, env的区别
set和export的区别 set可以用来显示所有变量的值,而export能将一个变量导出,在其子shell或子进程也可见 export和env的区别 两者的作用是一样的,只是env是一个外部工具 基 ...
- for(var i in items) 和 for(var i;i<items.length;i++) 区别
前者循环的是属性,后者循环的才是数组. 若项目中对数组属性进行了扩展,那切记不能使用前者,否则在循环数组时扩展的函数体也会被当做数据返回. var data = { p1:1, p2:"b& ...
- Vue 时间修饰符之使用$event和prevent修饰符操作表单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...