小红书小程序

小红书小程序

笔记详情轮播图指示点的随图片数量的变化动态变化

实图
上代码（uni-app)

<template>
  <view class="dt-box">
    <view class="dt-con">
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
        <view id="demo1" class="dt-img">
          <swiper
            class="swiper"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
            @change="imgChange"
          >
            <swiper-item v-for="(item, index) in dt_con" :key="index">
              <view class="img-box">
                <view class="img">
                  <img :src="item.url" alt="" width="100%" height="380" />
                </view>
                <view class="img-current">{{ current_img }}</view>
              </view>
            </swiper-item>
          </swiper>
          <!-- 图片长度<=5时   -->
          <view class="img-tips" v-if="dt_con.length <= 5&&dt_con.length>=2">
            <span
              class="tips"
              v-for="(item, index) in dt_con"
              :key="index"
              :class="[currentpage == index ? 'active' : '']"
            ></span>
          </view>
          <!-- 图片长度>5时 -->
          <view class="img-tips" v-if="dt_con.length > 5 && currentpage < 3">
            <span
              class="tips"
              v-for="(item, index) in 3"
              :key="index"
              :class="[currentpage == index ? 'active' : '']"
            ></span>
            <span class="tips"></span>
            <span class="tips tips-next-next"></span>
          </view>
          <view
            class="img-tips"
            v-if="
              dt_con.length > 5 &&
              currentpage >= 3 &&
              currentpage < dt_con.length - 3
            "
          >
            <span class="tips tips-next-next"></span>
            <span class="tips"></span>
            <span class="tips active"></span>
            <span class="tips"></span>
            <span class="tips tips-next-next"></span>
          </view>
          <view
            class="img-tips"
            v-if="dt_con.length > 5 && currentpage >= dt_con.length - 3"
          >
            <span class="tips tips-next-next"></span>
            <span class="tips"></span>
            <span
              class="tips"
              v-for="(item, index) in 3"
              :key="index"
              :class="[
                currentpage - (dt_con.length - 3) == index ? 'active' : '',
              ]"
            ></span>
          </view>
        </view>
        <view id="demo2" class="dt-user">B</view>
        <view id="demo3" class="dt-rec">C</view>
      </scroll-view>
    </view>
    <view class="dt-btn"> </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      currentpage: 0,
      scrollTop: 0,
      indicatorDots: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      dt_con: [],
      current_img: "",
      dt_v: {
        0: [
          { img_id: "0", title: "first", url: "../../static/imgs/1.jpg" },
          { img_id: "1", title: "sec", url: "../../static/imgs/2.jpg" },
          { img_id: "2", title: "th", url: "../../static/imgs/3.jpg" },
          { img_id: "3", title: "fou", url: "../../static/imgs/4.jpg" },
          { img_id: "4", title: "fif", url: "../../static/imgs/5.jpg" },
          { img_id: "5", title: "six", url: "../../static/imgs/6.jpg" },
          { img_id: "6", title: "first", url: "../../static/imgs/1.jpg" },
          { img_id: "7", title: "sec", url: "../../static/imgs/2.jpg" },
          // { img_id: "8", title: "th", url: "../../static/imgs/3.jpg" },
          // { img_id: "9", title: "fou", url: "../../static/imgs/4.jpg" },
          // { img_id: "10", title: "fif", url: "../../static/imgs/5.jpg" },
          // { img_id: "11", title: "six", url: "../../static/imgs/6.jpg" },
        ],
        1: [
          { img_id: "0", title: "first", url: "../../static/imgs/4.jpg" },
          { img_id: "1", title: "sec", url: "../../static/imgs/5.jpg" },
          { img_id: "2", title: "th", url: "../../static/imgs/6.jpg" },
          { img_id: "3", title: "fou", url: "../../static/imgs/7.jpg" },
          { img_id: "4", title: "fif", url: "../../static/imgs/8.jpg" },
          { img_id: "5", title: "six", url: "../../static/imgs/9.jpg" },
        ],
      },
    };
  },
  onLoad(options) {
    this.dt_con = this.dt_v[options.id];//从上级页面获取笔记id
    if (this.dt_con && this.dt_con.length) {
      this.current_img = "1/" + this.dt_con.length;
    } else {
      this.current_img = "1/1";
    }
  },
  mounted() {},
  methods: {
    imgChange(e) {
      this.currentpage = e.detail.current;
      this.current_img = this.currentpage + 1 + "/" + this.dt_con.length;
      console.log(this.currentpage);
    },
  },
};
</script>
<style scoped>
uni-page-body {
  height: 100%;
}
.dt-box {
  height: 100%;
}
.dt-con {
  height: 92%;
  width: 100%;
}
.scroll-Y {
  height: 100%;
}
.dt-img {
  height: 400px;
  position: relative;
}
uni-swiper {
  height: 100%;
}
.img-box {
  position: relative;
}
.img-current {
  position: absolute;
  bottom: 30px;
  right: 15px;
  z-index: 999;
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}
.img-tips {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.tips {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 2px;
}
.tips-next {
  transform: scale(0.8);
}
.tips-next-next {
  transform: scale(0.6);
}
.active {
  background-color: orange;
}
.dt-user {
  height: 20rem;
}
.dt-rec {
  height: 20rem;
}
.dt-btn {
  height: 8%;
  width: 100%;
  background-color: #ccc;
}
</style>