微信小程序Tab页、轮播图demo--第一课

微信小程序Tab页、轮播图demo--第一课.jpg

1 . 概述

我们在学习微信小程序或者做项目时，应该会遇到轮播Banner效果情况，那么这个轮播功能我们应该怎么编写呢？

今天我们说下微信小程序轮播Banner效果的实现，主要思路利用小程序列表渲染功能，读取导航栏中栏目数据的index和item。将index存入事件中可以读取的data中。js读取这个data值之后，修改相应模块元素的class，修改样式。

最巧妙的就是利用{ {currentNavbar==idx ? 'active' : ''}}这个数据绑定判断当前块是否被选中的状态。今天我们就分享这样的小教程。希望对大家有所帮助。

不多说了，二当家要上图来啦！

image

今天分享的是图一

image

快去拿个小板凳，坐等跟多Tab更新

2 . wxml

<view class="wrap" bindtouchstart="touchStart" bindtouchend="touchEnd">
  <view class="nav-item {
   {testClass[index]}}" wx:for="{
   {testNav}}" wx:key="" dat