小程序swiper一个轮播显示一个半内容且实现无缝滚动-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序swiper一个轮播显示一个半内容且实现无缝滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

小程序swiper一个轮播显示一个半内容且实现无缝滚动,小程序,经验分享,小程序

文章来源地址https://www.toymoban.com/news/detail-654520.html

wxml（无缝滚动：circular="true"）：

<!--components/tool_version/tool_version.wxml-->
<view class="tool-version">
  <swiper class="tool-version-swiper" circular="true" loop="true" autoplay="true" interval="5000" duration="1000">
    <swiper-item class="tool-version-swiper-item swiper-item1" wx:for="{{allToolData}}" wx:for-item="item" wx:key="index">
      <view class="tool-version-item">
        <view class="tool-version-item-title">
          <view class="tool-verison-name {{versionClass[item.toolVersion]}}"> {{ versionName[item.toolVersion] }}</view>
          <view class="tool-verison-price flex-center-between">
            <view class="tool-verison-basic-rate"> ¥{{ item.basicRate }}<text>/场</text></view>
            <view class="tool-verison-original-price">
              原价{{ item.originalPrice }}/场
            </view>
          </view>
        </view>
        <view class="tool-version-item-white">
          <view class="tool-version-item-cont">
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">基础费用</view>
              <view class="version-item-text-right">{{ item.basicRate }}</view>
            </view>
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">标准时长</view>
              <view class="version-item-text-right">
                {{
                item.toolVersion === 1
                ? "不限"
                : item.standardDuration+'天'
                }}
              </view>
            </view>
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">去版权logo</view>
              <view class="version-item-text-right">
                {{
                item.toolVersion === 1
                ? "无":
                item.toolVersion === 4
                ? "有"
                :'无（加' +item.removeCopyrightPrice+'元）'
                }}</view>
            </view>
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">最大参与人数</view>
              <view class="version-item-text-right">{{ item.maxNumberPeople }}人</view>
            </view>
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">人数扩容</view>
              <view class="version-item-text-right">
                {{
                item.toolVersion !== 1
                ? '每增加100人增加'+item.numberPeopleExpansionPrice+'元' : "—"
                }}
              </view>
            </view>
            <view class="version-item-text flex-center-between">
              <view class="version-item-text-left">时长续约</view>
              <view class="version-item-text-right">{{ item.basicRate }}</view>
            </view>
          </view>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>

wxss：

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-version-swiper {
  width: 100% !important;
  height: 730rpx;
}

.tool-version-swiper-item {
  width: 493rpx !important;
  padding: 0 0 0 32rpx;
}

.tool-version-item-title {
  width: 100%;
  height: 207rpx;
  background: linear-gradient(132deg, #EDF4FF 0%, #EBF8FF 100%);
  box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
  border-radius: 39rpx 0 0 0;
  position: relative;
}

.tool-verison-name {
  font-size: 32rpx;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #242424;
  line-height: 59rpx;
  letter-spacing: 3rpx;
  text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
  position: absolute;
  left: 0;
  top: 0;
  padding: 13rpx 48rpx;
  box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
  border-radius: 41rpx 0 41rpx 0;
}

/* 免费体验版 */
.version-sty1 {
  background: #d3e4ff;
  color: rgba(36, 36, 36, 1);
}

/* 基础版 */
.version-sty2 {
  background: #a4c7ff;
  color: #0064ff;
}

/* 专业版 */
.version-sty3 {
  background: #0064ff;
  color: #ffffff;
}

/* 旗舰版 */
.version-sty4 {
  background: linear-gradient(270deg,
      #0064ff 0%,
      #006cff 62%,
      #00c1ff 100%);
  color: #fff;
}

.tool-verison-price {
  padding: 115rpx 32rpx 33rpx 48rpx;
}

.tool-verison-basic-rate {
  font-size: 40rpx;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #242424;
  line-height: 59rpx;
  text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
}

.tool-verison-original-price {
  font-size: 20rpx;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: rgba(36, 36, 36, 0.6);
  line-height: 29rpx;
  letter-spacing: 1rpx;
  text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
  text-decoration: line-through;
}

.tool-version-item-white {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
}

.tool-version-item-cont {
  padding: 53rpx 48rpx 57rpx 48rpx;
}

.version-item-text {
  font-size: 22rpx;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #242424;
  line-height: 33rpx;
  letter-spacing: 1rpx;
  text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
}

.version-item-text:not(:last-child) {
  margin-bottom: 43rpx;
}

.version-item-text-right {
  font-weight: bold;
}

js:


Page({

  /**
   * 页面的初始数据
   */
  data: {
   allToolData: [{
        basicRate: 0,
        durationRenewalPrice: null,
        isLogo: 0,
        isRefund: 0,
        maxNumberPeople: 50,
        numberPeopleExpansionPrice: null,
        originalPrice: 0,
        paySettings: null,
        removeCopyrightPrice: null,
        standardDuration: -1,
        toolApplicationId: "1",
        toolApplicationPriceId: "1",
        toolVersion: 1,
      },
      {
        basicRate: 188,
        durationRenewalPrice: 50,
        isLogo: 0,
        isRefund: 1,
        maxNumberPeople: 500,
        numberPeopleExpansionPrice: 50,
        originalPrice: 299,
        paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
        removeCopyrightPrice: 99,
        standardDuration: 3,
        toolApplicationId: "1",
        toolApplicationPriceId: "3671774911571386373",
        toolVersion: 2,
      },
      {
        basicRate: 188,
        durationRenewalPrice: 50,
        isLogo: 0,
        isRefund: 1,
        maxNumberPeople: 500,
        numberPeopleExpansionPrice: 50,
        originalPrice: 299,
        paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
        removeCopyrightPrice: 99,
        standardDuration: 3,
        toolApplicationId: "1",
        toolApplicationPriceId: "3671774911571386373",
        toolVersion: 2,
      },
      {
        basicRate: 288,
        durationRenewalPrice: 50,
        isLogo: 0,
        isRefund: 1,
        maxNumberPeople: 1500,
        numberPeopleExpansionPrice: 50,
        originalPrice: 499,
        paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
        removeCopyrightPrice: 99,
        standardDuration: 10,
        toolApplicationId: "1",
        toolApplicationPriceId: "3674643125091639300",
        toolVersion: 3,
      },
      {
        basicRate: 388,
        durationRenewalPrice: 50,
        isLogo: 1,
        isRefund: 1,
        maxNumberPeople: 5000,
        numberPeopleExpansionPrice: 50,
        originalPrice: 799,
        paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
        removeCopyrightPrice: null,
        standardDuration: 15,
        toolApplicationId: "1",
        toolApplicationPriceId: "3674643125091639301",
        toolVersion: 4,
      }
    ],
    versionName: {
      1: "免费体验版",
      2: "基础版",
      3: "专业版",
      4: "旗舰版",
    },
    versionClass: {
      1: "version-sty1",
      2: "version-sty2",
      3: "version-sty3",
      4: "version-sty4",
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

到了这里，关于小程序swiper一个轮播显示一个半内容且实现无缝滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！