效果：思路：利用小程序列表渲染功能读取导航栏中栏目数据的index和item。将索引存储在事件中可以读取的数据中。js读取数据值后，修改对应模块元素的class和style。最巧妙的是使用数据绑定{{currentNavbar==idx?'active':''}}判断当前块是否被选中。wxml:{{item}}js:Page({data:{navbar:['Recommended','New','display'],currentNavbar:'0',},swichNav:function(e){this.setData({currentNavbar:e.currentTarget.dataset.idx});},}wxss(section):.navbar{display:flex;border-bottom:1pxsolid#eee;}.navbar-item{flex:1.0;text-align:center;字体大小：14px;颜色：#999；显示：块；宽度：30px；填充：10px；边距：自动；}.navbar-text.active{border-bottom：2pxsolid#000；颜色：#000；字体粗细：粗体；}extension:类似于tabswitching卡片切换效果（稍微修改一下就可以变成轮播图）effect:wxml:{{item.word}}wxss：.wrap{margin-top:20rpx;颜色：#999；位置：相对；宽度：750rpx；高度：250rpx；}.nav-item{宽度：400rpx；高度：200rpx；框阴影：005rpx#e24233；填充：5rpx；过渡：全部0.5s；断字：全部中断；背景色：雪；}.prev{位置：绝对；变换：比例（0.8）；左：-280rpx；右边距：55rpx;}.current{position:absolute;左：50%；margin-left:-200rpx;}.next{position:absolute;620转；顶部：0；变换：比例（0.8）；z-index:10;}.next+.next{z-index:-1;background-color:deepskyblue;}最后.next+.next的样式是让卡片切换的时候，可以看到右边卡片的移动过程，而不是右边一个固定的卡片js:varflag=0;varclassCatch=['current','next','next','next'];vartouch=[0,0];Page({data:{testClass:classCatch,testCurrentNav:0,testNav:[{word:'111我来自后方111111111111111111111111',},{word:'222我来自后方222222222222222222222222222222',},{word:'333我来自后方33333333333333333333333333333333333333',},{word:'444我来自Rear4444444444444444444444444444444444444',}]},/***Testcarouselimage*/touchStart(e){touch[0]=e.touches[0].clientX},touchEnd(e){touch[1]=e.changedTouches[0].clientX;if(touch[0]-touch[1]>5){this.swipNext();}elseif(touch[1]-touch[0]>5){this.swipPrev();}},swipNext(e){flag++;if(flag0){for(vari=0;i
