微信小程序js开发 swiper，带圆点和列表

由于微信小程序不可引用第三方框架，所以当你需要一个带圆点的swipe的时候就需要自己手动去写了，这里是我手动封装了一个基于微信小程序的swiper！欢迎查看下载

1、tab标题总共8个，所以一屏无法全部显示。 
2、tab内容区左右滑动切换时，tab标题随即做标记（active）。 
3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 
2、swiper组件的current组件用于控制当前显示哪一页 
3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

下面是HTML部分：

<!--pages/gundong/index.wxml-->
<view>
  
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
      <scroll-view scroll-y="true" class="scoll-h">
        <block wx:for="{{[1]}}" wx:key="*this">
          <view class="item-ans">
            <view class="avatar">
              <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
            </view>
            <view class="expertInfo">
              <view class="name">欢颜</view>
              <view class="tag">知名情感博主</view>
              <view class="answerHistory">134个回答，2234人听过 </view>
            </view>
            <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator>
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav"></view>
    <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav"></view>
  </scroll-view>
</view>

js部分：

var app = getApp();
Page({
  data: {
    winHeight: "",//窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //tab标题的滚动条位置
    expertList: [{ //假数据
      img: "avatar.png",
      name: "欢顔",
      tag: "知名情感博主",
      answer: 134,
      listen: 2234
    }]
  },
  // 滚动切换标签样式
  switchTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav: function (e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) { return false; }
    else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function () {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function () {
    var that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 180;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });
  },
  footerTap: app.footerTap
})

css部分：

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  /* background: #f7f7f7; */
  font-size: 16px;
  white-space: nowrap;
  /* position: fixed;
  top: 0;
  left: 0; */
  margin-top: -100rpx;
  z-index: 99;
  text-align: center
}

.tab-item {
  margin: 0 30rpx;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#cdcdcd;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-item.active:after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 0rpx;
  border-radius: 50%;
}

.item-ans {
  width: 100%;
  display: flex;
  flex-grow: row no-wrap;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  height: 180rpx;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-right: 30rpx;
}

.avatar .img {
  width: 100%;
  height: 100%;
}

.avatar .doyen {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  bottom: -2px;
  right: 20rpx;
}

.expertInfo {
  font-size: 12px;
  flex-grow: 2;
  color: #b0b0b0;
  line-height: 1.5em;
}

.expertInfo .name {
  font-size: 16px;
  color: #000;
  margin-bottom: 6px;
}

.askBtn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid #4675f9;
  color: #4675f9;
}

.tab-content {
  margin-top: 80rpx;
}

.scoll-h {
  height: 100%;
}