微信小程序之 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
随机推荐
- Last 2 dimensions of the array must be square
这个报错是因为我们在求解行列式的值的时候使用了: np.linalg.det(D) 但是D必须是方阵才可以进行运算,不是方阵则会报错,我们把之前的行列式更改为方阵就不会再报错了,当然这也是numpy自 ...
- JS 简介
JS 简介 JavaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. avaScript 是脚本语言 J ...
- 为什么AlertDialog要使用Builder来构建呢
为什么 AlertDialog 使用Builder 模式呢? 首先说句废话,因为 AlertDialog 太过复杂,内部参数太多,然后不使用构建者模式那么 AlertDialog 的构造方法就可能是: ...
- 详解 DNS 与 CoreDNS 的实现原理
域名系统(Domain Name System)是整个互联网的电话簿,它能够将可被人理解的域名翻译成可被机器理解 IP 地址,使得互联网的使用者不再需要直接接触很难阅读和理解的 IP 地址. http ...
- 从零开始的SpringBoot项目搭建
前言 今天是我加入博客园的第一天今天刚好学习到SpringBoot,就顺便记录一下吧 一.创建项目 1.创建工程 ① 通过File > New > Project,新建工程,选择Sprin ...
- Spark中持久化和序列化学习
一.cache和persisit的对比 -rw-r--r--@ 1 hadoop staff 68M 5 17 07:04 access.log    cache/persitence是 laz ...
- Centos下YUM源配置及相关问题应用篇
yum源配置在工作中会经常用到,特别是安装数据库时,一个个去安装依赖包比较耗时,直接配置好yum安装即可. (特别提醒:redhat有时会提示系统未注册,要求你注册,这个只对需要连接公网的yum源产生 ...
- git(1) 比较两个不同版本的文件
git diff commit_id1:file_name commit_id2:file_name 或者 git diff commit_id1 commit_id2 -- file_name co ...
- WPF 精修篇 自定义控件
原文:WPF 精修篇 自定义控件 自定义控件 因为没有办法对界面可视化编辑 所以用来很少 现在实现的是 自定义控件的 自定义属性 和自定义方法 用VS 创建自定义控件后 会自动创建 Themes 文件 ...
- DirectShow 简介
一.DirectShow 简介 DirectShow(简称 DShow) 是一个 Windows 平台上的流媒体框架,提供了高质量的多媒体流采集和回放功能.它支持多种多样的媒体文件格式,包括 ASF. ...