uni-app 一些实用的页面模板

时间倒计时

<!-- 时间倒计时 -->
<template>
  <view class="container">
    <view class="flex-row time-box">
      <view class="time-item">{{ laveTimeList[0] }}</view>
      <text>天</text>
      <view class="time-item">{{ laveTimeList[1] }}</view>
      <text>时</text>
      <view class="time-item">{{ laveTimeList[2] }}</view>
      <text>分</text>
      <view class="time-item">{{ laveTimeList[3] }}</view>
      <text>秒</text>
    </view>
    <view class="flex-row time-box">
      <view class="flex-row">
        <block v-for="(item, i) in laveTimeDateList[0]" :key="i">
          <view class="time-item date-item">{{ item }}</view>
        </block>
        <text>天</text>
      </view>
      <view class="flex-row">
        <block v-for="(item, i) in laveTimeDateList[1]" :key="i">
          <view class="time-item date-item">{{ item }}</view>
        </block>
        <text>时</text>
      </view>
      <view class="flex-row">
        <block v-for="(item, i) in laveTimeDateList[2]" :key="i">
          <view class="time-item date-item">{{ item }}</view>
        </block>
        <text>分</text>
      </view>
      <view class="flex-row">
        <block v-for="(item, i) in laveTimeDateList[3]" :key="i">
          <view class="time-item date-item">{{ item }}</view>
        </block>
        <text>秒</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      laveTimeList: [], // 剩余时间(天-时-分-秒)
      laveTimeDateList: [], // 在拆分
      timer: "" // 定时器
    };
  },
  onLoad() {
    this.getLeftTime("2023/10/25 14:52:00");
  },
  onUnload() {
    if (this.timer) clearInterval(this.timer);
  },
  methods: {
    /* 计算剩余时间 */
    getLeftTime(e) {
      let timeLeft = this.getTimestap(e); // 获取时间戳
      this.initDate(timeLeft); // 初始化数据
      this.timer = setInterval(() => {
        this.initDate(timeLeft); // 初始化数据
        if (timeLeft-- === 0) clearInterval(this.timer); // 清除定时
      }, 1000);
    },
    /* 初始化数据 */
    initDate(e) {
      const period = this.formateSeconds(e); // 天-时-分-秒
      this.laveTimeList = period; // 剩余时间(天-时-分-秒)
      this.laveTimeDateList = this.formatDate(JSON.stringify(period)); // 格式化日期
    },
    /* 天-时-分-秒 */
    formateSeconds(e) {
      const time = [],
        day = parseInt(e / 86400),
        hour = parseInt((e % 86400) / 3600),
        min = parseInt(((e % 86400) % 3600) / 60),
        sec = parseInt(((e % 86400) % 3600) % 60);
      time[0] = day > 0 ? this.addZero(day) : this.addZero(0);
      time[1] = hour > 0 ? this.addZero(hour) : this.addZero(0);
      time[2] = min > 0 ? this.addZero(min) : this.addZero(0);
      time[3] = sec > 0 ? this.addZero(sec) : this.addZero(0);
      return time;
    },
    /* 数字前面补零 */
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
    /* 获取时间戳 */
    getTimestap(e) {
      const curTime = parseInt(new Date().getTime() / 1000); // 当前时间
      const futureTime = parseInt(new Date(e.replace(/-/g, "/")).getTime() / 1000); // 指定时间
      return futureTime <= curTime ? 0 : futureTime - curTime;
    },
    /* 格式化日期 */
    formatDate(e) {
      const list = JSON.parse(e);
      for (let i = 0; i < list.length; i++) {
        list[i] = list[i].toString().split("");
      }
      return list;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .flex-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  .time-box {
    color: #eaa81b;
    font-size: 26rpx;
    margin: 20rpx;
    padding: 40rpx 20rpx;
    background: #fff;
    border-radius: 20rpx;
  }
  .time-item {
    width: 60rpx;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    margin: 0 20rpx;
    background: linear-gradient(90deg, #ffebb1 0%, #ffdb8f 100%);
    border-radius: 4rpx;
  }
  .date-item {
    width: 30rpx;
    margin: 0 10rpx;
  }
}
</style>

canvas 图形验证码

<!-- canvas 图形验证码 -->
<template>
  <view class="container">
    <view class="canvas-box"><canvas type="2d" id="canvasCode" @click="drawPic" /></view>
    <view class="text-tip">验证码：{{ curCode }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      width: 100, // 宽度
      height: 50, // 高度
      fontSize: 25, // 字体大小
      fontFamily: "SimHei", // 字体
      count: 4, // 验证码位数
      curCode: "", // 当前验证码
      jamPointNum: 40, // 干扰点数
      jamLineNum: 10 // 干扰线数
    };
  },
  onLoad() {
    this.drawPic(); // 绘制验证码图片
  },
  methods: {
    /* 绘制验证码图片 */
    drawPic() {
      uni
        .createSelectorQuery()
        .select("#canvasCode")
        .fields({ node: true, size: true })
        .exec(res => {
          const canvasObj = res[0].node;
          const ctx = canvasObj.getContext("2d");
          // 清除画布
          ctx.fillStyle = "rgb(255, 255, 255)";
          ctx.fillRect(0, 0, 91, 36);
          // 绘制背景色
          ctx.fillStyle = this.randomColor(180, 240); // 颜色若太深可能导致看不清
          ctx.fillRect(0, 0, this.width, this.height);
          // 绘制文字
          const str = "ABCEFGHJKLMNPQRSTWXY123456789";
          let codeTemp = "";
          for (let i = 0; i < this.count; i++) {
            const txt = str[this.randomNum(0, str.length)];
            codeTemp += txt;
            ctx.fillStyle = this.randomColor(50, 160); // 随机生成字体颜色
            ctx.font = this.randomNum(this.fontSize, this.fontSize + 6) + "px " + this.fontFamily; // 随机生成字体大小
            const x = 10 + i * 20;
            const y = this.randomNum(25, 30);
            const deg = this.randomNum(-30, 30);
            // 修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate((deg * Math.PI) / 180);
            ctx.fillText(txt, 5, 0);
            // 恢复坐标原点和旋转角度
            ctx.rotate((-deg * Math.PI) / 180);
            ctx.translate(-x, -y);
          }
          this.curCode = codeTemp;
          // 绘制干扰线
          for (let i = 0; i < this.jamLineNum; i++) {
            ctx.strokeStyle = this.randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(this.randomNum(0, this.width), this.randomNum(0, this.height));
            ctx.lineTo(this.randomNum(0, this.width), this.randomNum(0, this.height));
            ctx.stroke();
          }
          // 绘制干扰点
          for (let i = 0; i < this.jamPointNum; i++) {
            ctx.fillStyle = this.randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(this.randomNum(0, this.width), this.randomNum(0, this.height), 1, 0, 2 * Math.PI);
            ctx.fill();
          }
        });
    },
    randomNum(min, max) {
      // 生成一个随机数
      return Math.floor(Math.random() * (max - min) + min);
    },
    randomColor(min, max) {
      // 生成一个随机色
      const red = this.randomNum(min, max); // 红色
      const green = this.randomNum(min, max); // 绿色
      const blue = this.randomNum(min, max); // 蓝色
      return `rgb(${red}, ${green}, ${blue})`;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .canvas-box {
    width: 200rpx;
    height: 100rpx;
    margin: 200rpx auto;
  }
  .text-tip {
    width: 80%;
    text-align: center;
    color: #333;
    font-size: 28rpx;
    margin: 80rpx auto;
  }
}
</style>

圆角灯笼

<!-- 圆角灯笼 -->
<template>
  <view class="container">
    <!-- 灯笼-内 -->
    <view class="cont-box">
      <view class="lantern-box">
        <view class="line-tip"></view>
        <view class="outer-bg">
          <view class="inner-bg"><view class="text-tip">福</view></view>
        </view>
        <view class="spike-box">
          <view class="spike-tip"></view>
          <view class="dots-tip"></view>
        </view>
      </view>
    </view>
    <!-- 灯笼-外 -->
    <view class="cont-box cont-outer-box">
      <view class="lantern-box">
        <view class="line-tip"></view>
        <view class="outer-bg">
          <view class="inner-bg"><view class="text-tip">幸</view></view>
        </view>
        <view class="spike-box">
          <view class="spike-tip"></view>
          <view class="dots-tip"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  .cont-box {
    position: fixed;
    top: -80rpx;
    right: -40rpx;
    z-index: 999;
    .lantern-box {
      position: relative;
      width: 240rpx;
      height: 180rpx;
      background: rgba(216, 0, 15, 0.8);
      margin: 100rpx;
      transform-origin: 50% -200rpx;
      -webkit-transform-origin: 50% -200rpx;
      animation: swing 3s infinite ease-in-out;
      -webkit-animation: swing 3s infinite ease-in-out;
      box-shadow: -10rpx 10rpx 100rpx 8rpx rgba(250, 108, 0, 1);
      border-radius: 50% 50%;
    }
    .lantern-box::before {
      content: " ";
      position: absolute;
      top: -14rpx;
      left: 58rpx;
      display: block;
      width: 120rpx;
      height: 24rpx;
      background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
      border: solid 2rpx #dc8f03;
      border-radius: 10rpx 10rpx 0 0;
      z-index: 999;
    }
    .lantern-box::after {
      content: " ";
      position: absolute;
      bottom: -14rpx;
      left: 20rpx;
      display: block;
      width: 120rpx;
      height: 24rpx;
      margin-left: 40rpx;
      background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
      border: solid 2rpx #dc8f03;
      border-radius: 0 0 10rpx 10rpx;
    }
    .line-tip {
      position: absolute;
      top: -40rpx;
      left: 120rpx;
      width: 4rpx;
      height: 40rpx;
      background: #dc8f03;
    }
    .outer-bg {
      width: 200rpx;
      height: 180rpx;
      background: rgba(216, 0, 15, 0.1);
      margin: 24rpx 16rpx 16rpx 16rpx;
      border: 4rpx solid #dc8f03;
      border-radius: 50% 50%;
      .inner-bg {
        width: 90rpx;
        height: 180rpx;
        background: rgba(216, 0, 15, 0.1);
        margin: -8rpx 16rpx 16rpx 52rpx;
        border: 4rpx solid #dc8f03;
        border-radius: 50% 50%;
        .text-tip {
          text-align: center;
          line-height: 170rpx;
          color: #dc8f03;
          font-size: 3.1rem;
          font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
          font-weight: bold;
        }
      }
    }
    .spike-box {
      position: relative;
      width: 10rpx;
      height: 40rpx;
      background: #ffa500;
      margin: -10rpx 0 0 118rpx;
      transform-origin: 50% -90rpx;
      -webkit-transform-origin: 50% -90rpx;
      animation: swing 4s infinite ease-in-out;
      -webkit-animation: swing 4s infinite ease-in-out;
      border-radius: 0 0 10rpx 10rpx;
      .dots-tip {
        position: absolute;
        top: 28rpx;
        left: -4rpx;
        width: 20rpx;
        height: 20rpx;
        background: #dc8f03;
        border-radius: 50%;
      }
      .spike-tip {
        position: absolute;
        top: 36rpx;
        left: -4rpx;
        width: 20rpx;
        height: 70rpx;
        background: #ffa500;
        border-radius: 0 0 0 10rpx;
      }
    }
  }
  .cont-outer-box {
    top: -60rpx;
    right: 20rpx;
    .lantern-box {
      animation: swing 5s infinite ease-in-out;
      -webkit-animation: swing 5s infinite ease-in-out;
      box-shadow: -10rpx 10rpx 60rpx 8rpx rgba(252, 144, 61, 1);
    }
  }
  @keyframes swing {
    0% {
      -webkit-transform: rotate(-10deg);
    }
    50% {
      -webkit-transform: rotate(10deg);
    }
    100% {
      -webkit-transform: rotate(-10deg);
    }
  }
  @-webkit-keyframes swing {
    0% {
      -webkit-transform: rotate(-10deg);
    }
    50% {
      -webkit-transform: rotate(10deg);
    }
    100% {
      -webkit-transform: rotate(-10deg);
    }
  }
}
</style>

<style>
page {
  background-color: #222;
}
</style>

自定义顶部导航栏

<!-- 自定义顶部导航栏 -->
<template>
  <view class="container" :style="'padding-top: ' + navHeight + 'rpx'">
    <view class="head-back">
      <image src="/static/return.png" mode="aspectFill" @click="toBack" />
      <image src="/static/home.png" mode="aspectFill" @click="toHome" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0, // 状态导航栏高度
      navigationBarHeight: 0, // 导航栏高度(标题栏高度)
      navHeight: 0 // 总体高度
    };
  },
  onLoad() {
    /** 状态栏高度 */
    this.statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
    /** 获取微信胶囊的位置信息 width,height,top,right,left,bottom */
    const custom = wx.getMenuButtonBoundingClientRect();
    /** 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2 */
    this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2;
    /** 总体高度 = 状态栏高度 + 导航栏高度 */
    this.navHeight = this.navigationBarHeight + this.statusBarHeight;
  },
  methods: {
    /* 返回 */
    toBack() {
      console.log("返回");
    },
    /* 回到首页 */
    toHome() {
      console.log("回到首页");
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 25rpx;
  background-color: rgba(0, 0, 0, 0.7);
  .head-back {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180rpx;
    height: 60rpx;
    padding: 0 20rpx;
    margin-left: 25rpx;
    border: 1rpx solid rgba(204, 204, 204, 0.6);
    box-sizing: border-box;
    border-radius: 50rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .head-back::after {
    content: "";
    position: absolute;
    top: 10%;
    left: calc(50% - 1rpx);
    width: 2rpx;
    height: 80%;
    background: #fff;
  }
}
</style>

滚动自动吸顶

<!-- 滚动自动吸顶 -->
<template>
  <view class="container">
    <view class="head-box">头部内容区域</view>
    <view class="nav-box" :class="isFixed ? 'fix-tip' : ''" id="navBox">
      <view class="nav-item" :class="{ 'active-tip': curNav === i }" v-for="(item, i) in navList" :key="i" @click="navToggle(i)">
        {{ item }}
      </view>
    </view>
    <view :class="isFixed ? 'p-t-nav' : ''" id="contBox">
      <view class="cont-item" v-for="(item, i) in curNav * 10 + 5" :key="i">{{ item }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false, // 是否吸顶
      navTop: 0, // 导航栏到顶部的距离
      curNav: 0, // 当前导航栏
      navList: ["未开始", "进行中", "已结束"]
    };
  },
  onReady() {
    // 获取节点距离顶部的距离
    uni
      .createSelectorQuery()
      .select("#navBox")
      .boundingClientRect(rect => {
        if (rect && rect.top) this.navTop = parseInt(rect.top);
      })
      .exec();
  },
  /* 监听页面滚动事件 */
  onPageScroll(e) {
    this.isFixed = parseInt(e.scrollTop) >= this.navTop;
  },
  methods: {
    /* 导航栏切换 */
    navToggle(i) {
      if (this.curNav == i) return;
      this.curNav = i;
      if (this.isFixed) uni.pageScrollTo({ selector: "#contBox", duration: 0.5 }); // duration.滚动到指定位置需要的时间
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  $navHeight: 88rpx; // nav导航栏高度
  .head-box {
    width: 100%;
    height: 300rpx;
    color: #fff;
    font-size: 26rpx;
    padding: 30rpx;
    background: linear-gradient(90deg, #f54ea2, #ff7676);
    box-sizing: border-box;
  }
  .nav-box {
    position: relative;
    display: flex;
    width: 100%;
    height: $navHeight;
    line-height: $navHeight;
    background: #fff;
    box-shadow: 0 5rpx 5rpx #ccc;
    .nav-item {
      position: relative;
      flex: 1;
      text-align: center;
      color: #333;
      font-size: 28rpx;
    }
    .nav-item::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 4rpx;
      width: 0;
      height: 6rpx;
      background: linear-gradient(90deg, #f54ea2, #ff7676);
      transition: 0.3s width linear;
      border-radius: 3rpx;
    }
    .active-tip {
      color: transparent;
      font-size: 30rpx;
      background-clip: text;
      -webkit-background-clip: text;
      background-image: linear-gradient(90deg, #f54ea2, #ff7676);
      transition: 0.3s all linear;
      transition-delay: 0.1s;
      font-weight: 900;
    }
    .active-tip::after {
      width: 40%;
    }
  }
  .fix-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .p-t-nav {
    padding-top: $navHeight;
  }
  .cont-item {
    text-align: center;
    height: 50rpx;
    line-height: 50rpx;
    color: #999;
    padding: 20rpx;
    background: #fff;
    border-bottom: 1rpx solid #eaeef1;
  }
}
</style>

swiper 消息滚动

<!-- swiper 消息滚动 -->
<template>
  <view>
    <!-- 展示一条数据 -->
    <template>
      <view class="tit-box">
        <view class="tit-tip">展示一条数据</view>
      </view>
      <view class="scroll-notice">
        <image class="horn-tip" src="https://img1.baidu.com/it/u=3874629958,3395061015&fm=253" />
        <swiper
          class="notice-box"
          vertical
          autoplay
          circular
          interval="4000"
          duration="1500"
          display-multiple-items="1"
          easing-function="easeInOutCubic"
        >
          <swiper-item v-for="(item, i) in swiperList" :key="i">
            <view class="item-box">
              <view>{{ item.bonusTime }}</view>
              <view class="name-tip">抽中了 {{ item.awardName }}</view>
            </view>
          </swiper-item>
        </swiper>
        <image class="arrow-tip" src="https://img0.baidu.com/it/u=1153718811,3800194060&fm=253" />
      </view>
    </template>
    <!-- 展示两条数据 -->
    <template>
      <view class="tit-box">
        <view class="tit-tip">展示两条数据</view>
      </view>
      <view class="fix-two-box">
        <view class="title-box">
          <view class="line-tip"></view>
          <view class="title-tip">展示两条数据</view>
          <view class="line-tip"></view>
        </view>
        <swiper class="fix-swiper" vertical autoplay circular interval="3000" display-multiple-items="2">
          <swiper-item v-for="(item, i) in dataList" :key="i">
            <view class="item-box">
              <view>{{ item.bonusTime }}</view>
              <view class="name-tip">抽中了 {{ item.awardName }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>
    <!-- 高度随数据长度而变化 -->
    <template>
      <view class="tit-box">
        <view class="tit-tip">高度随数据长度而变化</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 3 }" @click="toSwitchLen(3)">3条</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 6 }" @click="toSwitchLen(6)">6条</view>
        <view class="btn-tip" :class="{ 'is-sel': curLen === 'all' }" @click="toSwitchLen('all')">全部</view>
      </view>
      <view class="vary-swiper">
        <swiper
          vertical
          autoplay
          circular
          interval="3000"
          :style="'height: ' + (swiperList.length > 6 ? 460 : swiperList.length * 60) + 'rpx'"
          :display-multiple-items="swiperList.length > 6 ? 7 : swiperList.length"
        >
          <swiper-item v-for="(item, i) in swiperList" :key="i">
            <view class="item-box">
              <view>{{ item.bonusTime }}</view>
              <view class="name-tip">抽中了 {{ item.awardName }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { bonusTime: "2023/11/01 10:10", awardName: "iPhone 12 Pro Max" },
        { bonusTime: "2023/11/02 11:15", awardName: "华为Mate 40 Pro" },
        { bonusTime: "2023/11/03 12:20", awardName: "三星Galaxy S21 Ultra" },
        { bonusTime: "2023/11/04 13:25", awardName: "小米11 Ultra" },
        { bonusTime: "2023/11/05 14:30", awardName: "OPPO Find X3 Pro" },
        { bonusTime: "2023/11/06 15:35", awardName: "vivo X60 Pro+" },
        { bonusTime: "2023/11/07 16:40", awardName: "谷歌Pixel 6 Pro" },
        { bonusTime: "2023/11/08 17:45", awardName: "荣耀V40" }
      ], // 数据源
      /* 高度随数据长度而变化 */
      curLen: "",
      swiperList: []
    };
  },
  onLoad() {
    this.toSwitchLen("all"); // 切换数据长度
  },
  methods: {
    /* 切换数据长度 */
    toSwitchLen(e) {
      if (this.curLen === e) return;
      this.curLen = e;
      const rowData = JSON.parse(JSON.stringify(this.dataList));
      if (e === "all") e = rowData.length;
      this.swiperList = rowData.slice(0, e);
    }
  }
};
</script>

<style lang="scss" scoped>
.tit-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 60rpx 30rpx 30rpx;
  .tit-tip {
    font-weight: 900;
  }
  .btn-tip {
    font-size: 24rpx;
    color: #ff6348;
    padding: 5rpx 20rpx;
    border: 1px solid #ff7f50;
    border-radius: 15rpx;
  }
  .is-sel {
    color: #fff;
    background: #ff6348;
  }
}
/* 展示一条数据 */
.scroll-notice {
  $noticeHeight: 66rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: $noticeHeight;
  line-height: $noticeHeight;
  padding: 0 24rpx;
  margin: 30rpx;
  background: #fdf6ec;
  border-radius: 12rpx;
  // 小喇叭
  .horn-tip {
    flex-shrink: 0;
    width: 34rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
  .notice-box {
    flex: 1;
    height: $noticeHeight;
    .item-box {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      .name-tip {
        color: #ff9900;
        margin-left: 6rpx;
      }
    }
  }
  // 向右箭头
  .arrow-tip {
    flex-shrink: 0;
    width: 22rpx;
    height: 22rpx;
  }
}
/* 展示两条数据 */
.fix-two-box {
  margin: 30rpx;
  border: 1px solid #2979ff;
  border-radius: 30rpx;
  .title-box {
    $bgColor: #2979ff; // 字体、线条颜色
    $lineWidth: 140; // 线条长度
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    .line-tip {
      position: relative;
      width: $lineWidth + rpx;
      height: 1rpx;
      background: $bgColor;
    }
    .line-tip::before {
      content: "";
      position: absolute;
      bottom: -7rpx;
      width: $lineWidth / 3 + 10 + rpx;
      height: 1rpx;
      background: $bgColor;
    }
    .line-tip:nth-child(1)::before {
      right: 0;
    }
    .title-tip {
      color: $bgColor;
      font-size: 36rpx;
      margin: 0 20rpx;
      font-weight: 900;
    }
  }
  .fix-swiper {
    height: 150rpx;
    font-size: 28rpx;
    margin-top: 30rpx;
    .item-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      padding: 10rpx 30rpx;
      .name-tip {
        color: #2979ff;
      }
    }
  }
}
/* 高度随数据长度而变化 */
.vary-swiper {
  margin: 30rpx;
  box-sizing: border-box;
  border-radius: 30rpx;
  border: 1px solid #ff7f50;
  .item-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    padding: 10rpx 30rpx;
    .name-tip {
      color: #ff6348;
    }
  }
}
</style>

swiper 商品滑动

<!-- swiper 商品滑动 -->
<template>
  <view>
    <!-- 一次滑动三条 -->
    <view class="container">
      <view class="tit_box">
        <view class="tit-tip">精选商品</view>
      </view>
      <view class="cont-box">
        <swiper class="swiper-box" :indicator-dots="false" autoplay interval="5000" duration="1000" circular>
          <swiper-item v-for="(row, i) in goodsList" :key="i">
            <view class="item-box" v-for="(item, j) in row.list" :key="j">
              <image class="img-tip" :src="item.img" mode="aspectFill" />
              <view class="name-tip">商品{{ j }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <!-- 一次滑动一条 -->
    <view class="container">
      <view class="tit_box">
        <view class="tit-tip">精选商品</view>
      </view>
      <view class="cont-box">
        <swiper
          class="swiper-box"
          :indicator-dots="false"
          autoplay
          interval="1500"
          duration="1000"
          circular
          :display-multiple-items="recordList.length > 2 ? 3 : recordList.length"
        >
          <swiper-item v-for="(item, i) in recordList" :key="i">
            <view class="item-box" style="width: 100%">
              <image class="img-tip" :src="item.img" mode="aspectFill" />
              <view class="name-tip">商品{{ i }}</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsList: [
        {
          list: [
            { img: "https://images.pexels.com/photos/1660030/pexels-photo-1660030.jpeg" },
            { img: "https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg" },
            { img: "https://images.pexels.com/photos/699953/pexels-photo-699953.jpeg" }
          ]
        },
        {
          list: [
            { img: "https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg" },
            { img: "https://images.pexels.com/photos/7441761/pexels-photo-7441761.jpeg" },
            { img: "https://images.pexels.com/photos/842571/pexels-photo-842571.jpeg" }
          ]
        },
        {
          list: [
            { img: "https://images.pexels.com/photos/17216084/pexels-photo-17216084.jpeg" },
            { img: "https://images.pexels.com/photos/8969237/pexels-photo-8969237.jpeg" },
            { img: "https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg" }
          ]
        }
      ],
      recordList: [
        { img: "https://images.pexels.com/photos/1660030/pexels-photo-1660030.jpeg" },
        { img: "https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg" },
        { img: "https://images.pexels.com/photos/699953/pexels-photo-699953.jpeg" },
        { img: "https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg" },
        { img: "https://images.pexels.com/photos/7441761/pexels-photo-7441761.jpeg" },
        { img: "https://images.pexels.com/photos/842571/pexels-photo-842571.jpeg" },
        { img: "https://images.pexels.com/photos/17216084/pexels-photo-17216084.jpeg" }
      ]
    };
  },
  onLoad() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 228rpx;
  margin: 20rpx;
  background: #ff4757;
  border-radius: 20rpx;
  overflow: hidden;
  .tit_box {
    width: 110rpx;
    text-align: center;
    height: 100%;
    background: #ff6b81;
    .tit-tip {
      display: inline-block;
      color: #fff;
      width: 50rpx;
      text-align: center;
      vertical-align: middle;
      font-size: 30rpx;
      white-space: pre-wrap;
      font-weight: 900;
    }
  }
  .tit_box::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .cont-box {
    position: absolute;
    top: 20rpx;
    left: 108rpx;
    width: 84%;
    white-space: nowrap;
    overflow-y: auto;
    box-sizing: border-box;
    .swiper-box {
      height: 192rpx;
      overflow: hidden;
      .item-box {
        float: left;
        width: calc(100% / 3);
        height: 192rpx;
        text-align: center;
        .img-tip {
          display: block;
          width: 145rpx;
          height: 154rpx;
          margin: 0 auto 9rpx;
          border-radius: 16rpx;
        }
        .name-tip {
          text-align: center;
          height: 30rpx;
          line-height: 30rpx;
          color: #fff;
          font-size: 22rpx;
        }
      }
    }
  }
}
</style>