微信小程序之 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);
    },
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法

    微信小程序 wx.login解密出现乱码的问题解决办法 最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密. 我使用的是官方提供的PHP demo,拷贝到程序中,测试发现,解密之后的数据前面有一串乱码. 类似于这样子的,前面一段是乱码. 经过仔细的检查,发现官方的提供的demo中的帐号和机密之后的信息是可以解密的,这就说明解密代码是没有问题的. 后来查询微信开发者社区,找到好多解密失败.其中一个回答说是因为多次调用wx.login之后导致的问题. 终

  • 微信小程序获取循环元素id以及wx.login登录操作

    微信小程序获取循环元素id以及wx.login登录操作 通过点击方法获取循环数据元素的id例: wxml里: <view id="list" wx:for="{{txt}}" > <text id="L_name">{{item.name}}</text> <text id="L_price">￥{{item.price}}/{{item.unit}}</text>

  • pjblog中清空引用的小程序

    sake: 很有用的程序 呵呵 转的,虽然现在打了防垃圾引用的补丁了 转自这里http://bbs.pjhome.net/viewthread.php?tid=12833&extra=page%3D1%26amp%3Bfilter%3D0%26amp%3Borderby%3Ddateline 今天彻底把我若怒了 自己写了一个,先清一下再说 保存到一个asp文件中,放到你BLOG的根目录,运行就OK了,页面中出现的数字是被删除的引用 我今天删了5000-- 复制代码 代码如下: <!--#in

  • 微信小程序页面滚动到指定位置代码实例

    这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRe

  • 微信小程序JS加载esmap地图的实例详解

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接). 二.具体实现步骤 1.域名验证: 由于微信平台的规定,web-view 指向的地址,必须是

  • 微信小程序HTTP接口请求封装代码实例

    1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回

  • 支付宝小程序自定义弹窗dialog插件的实现代码

    支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修改的.如是自己就捯饬着封装了个支付宝小程序自定义弹窗插件wcPop,多种展示场景,随意修改调用. 自定义的小程序弹窗采用了全新的模板布局,极简的api调用方式,同时解决了自定义弹窗出现时,蒙层下的页面仍可以滚动的问题. 在原始功能的基础上,新增了跟随定位弹窗.上下左右弹窗.弹窗swipe滑动功能 先来展示部分弹窗demo图: 在需要调用弹窗插件的页面引入tpl.js //信息框 btnT

  • 微信小程序之 catalog 切换实现解析

    微信小程序之 catalog 切换实现解析

    组件名称:catalog 组件属性:catalogData,type:String 组件描述:这是一个子组件,数据从父组件中传递 效果图: catalog 目录为多个,使用 scroll-view 容器.但是在当前组件中,只写每个 catalog 数据展示并实现 catalog 切换效果,这样会保证当前组件的最小粒度. 分析当前组件可能用到的属性为:组件名称,切换状态,未选中状态,切换点击方法. <block wx:for="{{catalogData}}" wx:key=&qu

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序实现tab切换效果

    微信小程序实现tab切换效果

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"

  • 微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例

    本文实例讲述了微信小程序实现swiper切换卡内嵌滚动条不显示的方法.分享给大家供大家参考,具体如下: index.wxml文件: <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">为你推荐</view&g

  • 微信小程序使用map组件实现解析经纬度功能示例

    微信小程序使用map组件实现解析经纬度功能示例

    本文实例讲述了微信小程序使用map组件实现解析经纬度功能.分享给大家供大家参考,具体如下: 声明 bug: 页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现原理 1. map组件实现定位标记或者指定定位标记,并保存location. 2. 采用高德地图微信小程序开发API(

  • 微信小程序实现滑动切换自定义页码的方法分析

    微信小程序实现滑动切换自定义页码的方法分析

    本文实例讲述了微信小程序实现滑动切换自定义页码的方法.分享给大家供大家参考,具体如下: 效果如下: 这里三个图片使用了swiper组件进行轮播,下方的页码数字1.2.3会随着图片的切换变动位置 在微信小程序中我们是无法操作dom的,那么 var div = document.getElementById('id'); div.setAttribute("class", "className"); 这种方式实现. 然后我们可以考虑使用hidden或者wx:if的方式,

  • 微信小程序 点击切换样式scroll-view实现代码实例

    微信小程序 点击切换样式scroll-view实现代码实例

    这篇文章主要介绍了微信小程序 点击切换样式scroll-view实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 scroll-view滚动视图点击切换样式 *.wxml <view class="content"> <view class="navbg"> <view class="nav"> <scroll-view class="

  • 微信小程序网络请求实现过程解析

    这篇文章主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置服务器域名: 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名进行网络通信. 服务器域名在:小程序后台=> 开发=> 开发设置 => 服务器域名中配置,配置时需注意: 1.域名只支持https(request, uploadFile,downloadFile)和wss(connectSocket)协议. 2.域名不能使用i

  • 10行代码实现微信小程序滑动tab切换

    10行代码实现微信小程序滑动tab切换

    本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下 效果预览: js部分: Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this.setData({ childW: this.data.arr.length * 80 }); }, tabOn: function (e) { this.setData({ index: e.currentTarget

随机推荐