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

性野喜悲2023-08-21 15:50

效果图：

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() {

  }
})
相关推荐
天***889619 小时前
小程序婚纱店摄影楼预约婚庆礼展示，小程序开发定制，会员下单档期系统
小程序
说私域19 小时前
开源AI智能名片链动2+1模式商城小程序下短视频电商变现与广告变现的对比研究
人工智能·小程序
天***889621 小时前
美业医疗美容院小程序，预约会员管理养生馆诊所肌护肤理疗系统，附源码交付
小程序
2501_915909062 天前
手机崩溃日志导出的工程化体系，从系统级诊断到应用行为分析的多工具协同方法
android·ios·智能手机·小程序·uni-app·iphone·webview
toooooop82 天前
微信小程序轮播图高度自适应优化
微信小程序·小程序
StarChainTech2 天前
电动车租赁行业的核心需求：智能中控设备的选择与技术方案
物联网·微信小程序·小程序·软件需求·共享经济
计算机毕设指导62 天前
基于微信小程序的积分制零食自选平台【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
云起SAAS2 天前
老年美文文章图文短视频资讯阅读抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·老年美文文章图文短视频资讯阅读
2501_915106322 天前
App HTTPS 抓包实战解析，从代理调试到真实网络流量观察的完整抓包思路
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 天前
苹果App Store应用程序上架方式全面指南
android·小程序·https·uni-app·iphone·webview
热门推荐
01GitHub 镜像站点02【AutoGLM部署】本地私有化部署AI手机Agent03UV安装并设置国内源04【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）05Open-AutoGLM Windows 安装部署教程06Linux下V2Ray安装配置指南07BongoCat - 跨平台键盘猫动画工具08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Windows 11 官方系统安装与重装完整教程（2025年最新版）10Cursor 又偷偷更新，这个功能太实用：Visual Editor for Cursor Browser