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

效果图：

 

 

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

  }
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/83115.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

五款拿来就能用的炫酷表白代码

五款拿来就能用的炫酷表白代码

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;小白零基础《Python入门到精通》 五款炫酷表白代码 1、无限弹窗表白2、做我女朋友好吗&#xff0c;不同意就关机3、…
阅读更多...
前端框架Vue

前端框架Vue

Vue 学习路线 学习HTML、CSS和JavaScript基础知识&#xff1a;Vue是基于JavaScript的框架&#xff0c;所以首先需要掌握HTML、CSS和JavaScript的基础知识&#xff0c;包括DOM操作、事件处理、变量和函数等。 学习Vue的基本概念&#xff1a;了解Vue的核心概念&#xff0c;如Vu…
阅读更多...
Streamlit项目：基于讯飞星火认知大模型开发Web智能对话应用

Streamlit项目：基于讯飞星火认知大模型开发Web智能对话应用

文章目录 1 前言2 API获取3 官方文档的调用代码4 Streamlit 网页的搭建4.1 代码及效果展示4.2 Streamlit相关知识点 5 结语 1 前言 科大讯飞公司于2023年8月15日发布了讯飞认知大模型V2.0&#xff0c;这是一款集跨领域知识和语言理解能力于一体的新一代认知智能大模型。前日&a…
阅读更多...
Unity 之 变量修饰符public 与private 以及默认

Unity 之 变量修饰符public 与private 以及默认

文章目录 publicprivate默认情况的成员变量 public 当在Unity中使用public修饰符时&#xff0c;它将变量声明为公共变量&#xff0c;这意味着该变量可以在Unity编辑器中进行设置&#xff0c;并且可以从其他脚本中访问和修改。公共变量在Unity中广泛用于在脚本之间共享数据&…
阅读更多...
快速排序 | C++|时间空间复杂度

快速排序 | C++|时间空间复杂度

1.概念 快速排序(QuickSort)的基本思想是:通过一趟排序将待排记录分割成独立的两部分&#xff0c;其中一部分记录的关键字均比另一部分记录的关键字小&#xff0c;则可分别对这两部分记录继续进行排序&#xff0c;以达到整个序列有序的目的。 2.算法思想描述 1.进行一次划分&…
阅读更多...
框架分析（1）-IT人必须会

框架分析（1）-IT人必须会

框架分析&#xff08;1&#xff09;-IT人必须会 专栏介绍当今主流框架前端框架后端框架移动应用框架数据库框架测试框架 Angular关键特点和功能&#xff1a;组件化架构双向数据绑定依赖注入路由功能强大的模板语法测试友好 优缺点分析优点缺点 总结 专栏介绍 link 主要对目前市…
阅读更多...
用例图的基本概念及其使用方式(包含案例)

用例图的基本概念及其使用方式(包含案例)

一、引言 用例(Use Case)&#xff0c;是软件工程或系统工程中对系统如何反应外界请求的描述&#xff0c;是一种通过用户的使用场景来获取需求的技术。此概念“用例”的提出者为Ivar Jacobson。每个用例提供了一个或多个场景&#xff0c;该场景说明了系统是如何和最终用户或其它…
阅读更多...
Android Studio实现读取本地相册文件并展示

Android Studio实现读取本地相册文件并展示

目录 原文链接效果 代码activity_main.xmlMainActivity 原文链接 效果 代码 activity_main.xml 需要有一个按钮和image来展示图片 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk…
阅读更多...
亚信科技AntDB数据库连年入选《中国DBMS市场指南》代表厂商

亚信科技AntDB数据库连年入选《中国DBMS市场指南》代表厂商

近日&#xff0c;全球权威ICT研究与顾问咨询公司Gartner发布了2023年《Market Guide for DBMS, China》&#xff08;即“中国DBMS市场指南”&#xff09;&#xff0c;该指南从市场份额、技术创新、研发投入等维度对DBMS供应商进行了调研。亚信科技是领先的数智化全栈能力提供商…
阅读更多...
Nginx的介绍

Nginx的介绍

本资料转载于传智教育-解锁你的IT职业薪未来&#xff0c;仅用于学习和讨论&#xff0c;如有侵权请联系 视频地址&#xff1a;04-Nginx的优点_哔哩哔哩_bilibili 资源文档&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1RlFl92FdxRUqc858JSxPSQ 提取码&#xff1a;12…
阅读更多...
极智嘉x吉利汽车 x京东物流，引领汽车行业智慧物流新变革！

极智嘉x吉利汽车 x京东物流，引领汽车行业智慧物流新变革！

近日&#xff0c;中国领先的汽车制造商吉利汽车携手中国领先的技术驱动的供应链解决方案及物流服务商京东物流、全球仓储机器人引领者极智嘉(Geek)&#xff0c;在西安吉利汽车制造基地RDC仓库率先落地SkyPick上存下拣解决方案&#xff0c;实现了全物流链精益化、智能化、一体化…
阅读更多...
热电联产在综合能源系统中的选址定容研究（matlab代码）

热电联产在综合能源系统中的选址定容研究（matlab代码）

目录 1 主要内容 目标函数 程序模型 2 部分代码 3 程序结果 1 主要内容 该程序参考《热电联产在区域综合能源系统中的定容选址研究》&#xff0c;主要针对电热综合能源系统进行优化&#xff0c;确定热电联产机组的位置和容量&#xff0c;程序以33节点电网和17节点热网为例…
阅读更多...
70 # 协商缓存的配置：通过修改时间

70 # 协商缓存的配置：通过修改时间

对比&#xff08;协商&#xff09;缓存 比较一下再去决定是用缓存还是重新获取数据&#xff0c;这样会减少网络请求&#xff0c;提高性能。 对比缓存的工作原理 客户端第一次请求服务器的时候&#xff0c;服务器会把数据进行缓存&#xff0c;同时会生成一个缓存标识符&#…
阅读更多...
传统车间VS数字化车间，以MES为核心打造智能工厂！

传统车间VS数字化车间，以MES为核心打造智能工厂！

传统车间的生产制造场景往往存在着信息沟通不顺畅&#xff0c;传达不到位的情况&#xff0c;导致生产效率受影响。 其次车间数据的“缓存期”偏短&#xff0c;无法进行长时间的复盘总结&#xff0c;从而难以发现企业管理问题&#xff0c;无法持续改善。 随着大数据、工业互联…
阅读更多...
【大虾送书第六期】搞懂大模型的智能基因，RLHF系统设计关键问答

【大虾送书第六期】搞懂大模型的智能基因，RLHF系统设计关键问答

目录 ✨1、RLHF是什么&#xff1f; ✨2、RLHF适用于哪些任务&#xff1f; ✨3、RLHF和其他构建奖励模型的方法相比有何优劣&#xff1f; ✨4、什么样的人类反馈才是好的反馈 ✨5、RLHF算法有哪些类别&#xff0c;各有什么优缺点&#xff1f; ✨6、RLHF采用人类反馈会带来哪些局…
阅读更多...
【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

【UniApp开发小程序】商品详情展示+评论、评论展示、评论点赞+商品收藏【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面日期格式化 后端收藏ControllerServicemapper 评论ControllerServiceMapper 商品Controller 阅读Service 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除 【商品详情】 【评论】 界面实现 工具js 该工…
阅读更多...
【虫洞攻击检测】使用多层神经网络的移动自组织网络中的虫洞攻击检测研究（Matlab代码实现）

【虫洞攻击检测】使用多层神经网络的移动自组织网络中的虫洞攻击检测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Web网页浏览器远程访问jupyter notebook服务器【内网穿透】

Web网页浏览器远程访问jupyter notebook服务器【内网穿透】

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…
阅读更多...
zotero在不同系统的安装（win/linux）

zotero在不同系统的安装（win/linux）

1 window系统安装 zotero 官网&#xff1a; https://www.zotero.org/ 官方文档 &#xff1a;https://www.zotero.org/support/ (官方)推荐常用的插件: https://www.zotero.org/support/plugins 入门视频推荐&#xff1a; Zotero 文献管理与知识整理最佳实践 点击 exe文件自…
阅读更多...
安全学习DAY17_信息打点-语言框架组件识别

安全学习DAY17_信息打点-语言框架组件识别

信息打点-WEB打点-语言框架&开发组件 文章目录 信息打点-WEB打点-语言框架&开发组件本节涉及链接&工具本节知识&思维导图基础概念介绍框架&#xff1a;组件&#xff1a;Web架构 对应Web测试手法后端&#xff1a;前端组件&#xff1a;java居多&#xff0c;框架&…
阅读更多...
最新文章

Copyright @ 2022~2023