微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）

前段书写

  <view class="about"><!-- 循环展示出tap信息 --><block wx:for="{{swiperTitle}}"><view bindtap="tapTitle" data-id="{{index}}" class="{{item.class}}">{{item.name}}</view></block></view><!-- 设置滑动模块 --><swiper bindchange="swiperInfo" current="{{current}}"><swiper-item>111111111111111</swiper-item><swiper-item>22222222222222222</swiper-item><swiper-item>333333333333333333333333</swiper-item></swiper>
</view>

js中书写

// 点击文字
tapTitle(e){let index=e.currentTarget.dataset.idlet arr=this.data.swiperTitle//循环处理数组for(let i=0;i<arr.length;i++){//判断并更改if(i==index){arr[i]['class'] = "txtColor";continue;}arr[i]['class'] = "";}//更新页面数据this.setData({swiperTitle:arr,current:index});},
// 滑动改变文字颜色样式swiperInfo(e){let index=e.detail.currentlet arr=this.data.swiperTitle//循环处理数组for(let i=0;i<arr.length;i++){//判断并更改if(i==index){arr[i]['class'] = "txtColor";continue;}arr[i]['class'] = "";}//更新页面数据this.setData({swiperTitle:arr,current:index});},

微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）相关推荐

微信小程序更新webview页面的三种方法
场景在小程序其它页面做了操作,数据发生改变,回到webview页面时需要更新webview里面的数据.由于小程序没有提供与webview的实时通信能力,因此刷新页面是个可考虑的做法. 方法一最常见 ...
微信小程序新闻详情页面效果实现
  <view class="d ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
微信小程序开发--分类页面实现
微信小程序开发–分类页面实现之前在详情页面利用Vant Weapp的UI库构建出了GoodsAction 商品导航功能,接着需要在分类页面(kind.wxml)实现商品分类. 1.引入第三方组件用 ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
微信小程序从零开始开发步骤（三）底部导航栏
上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序|上下滚动页面实现
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 案例描述微信小程 ...
《微信小程序开发》页面导航最强详解 | 如何对小程序页面进行跳转？
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航二.命 ...

微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）

微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）相关推荐

最新文章

热门文章