小程序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() {}
})
相关文章:

小程序swiper一个轮播显示一个半内容且实现无缝滚动
效果图: wxml(无缝滚动:circular"true"): <!--components/tool_version/tool_version.wxml--> <view class"tool-version"><swiper class"tool-version-swiper" circul…...
【自然语言处理】关系抽取 —— SimpleRE 讲解
SimpleRE 论文信息 标题:An Embarrassingly Simple Model for Dialogue Relation Extraction 作者:Fuzhao Xue 期刊:ICASSP 2022 发布时间与更新时间:2020.12.27 2022.01.25 主题:自然语言处理、关系抽取、对话场景、BERT arXiv:[2012.13873] An Embarrassingly Simple M…...

【O2O领域】Axure外卖订餐骑手端APP原型图,外卖众包配送原型设计图
作品概况 页面数量:共 110 页 兼容软件:Axure RP 9/10,不支持低版本 应用领域:外卖配送、生鲜配送 作品申明:页面内容仅用于功能演示,无实际功能 作品特色 本品为外卖订餐骑手端APP原型设计图&#x…...
DataGridView keydown事件无法在C#中工作
原因:单元格内编辑文本时,DataGridView keydown事件不起作用。每当单元格处于编辑模式时,其托管控件就会接收KeyDown事件而不是DataGridView包含它的父级.这就是为什么当单元格未处于编辑模式时(即使它被选中),键盘快捷键正常工作,因为DataGridView控件本身会收到Ke…...

【ElasticSearch】一键安装ElasticSearch与Kibana以及解决遇到的问题
目录 一、安装ES 二、安装Kibana 三、遇到的问题 一、安装ES 按顺序复制即可 docker network create es-net # 创建网络 docker pull images:7.12.1 # 拉取镜像 mkdir -p /root/es/data # 创建数据卷 mkdir -p /root/es/plugins # 创建数据卷 chmod 777 /root/es/** # 设置权…...

电商数据采集和数据分析
不管是做渠道价格的治理,还是做窜货、假货的打击,都需要品牌对线上数据尽数掌握,准确的数据是驱动服务的关键,所以做好电商数据的采集和分析非常重要。 当线上链接较多,品牌又需要监测线上数据时,单靠人工肯…...

react 11之 router6路由 (两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由,layout组件、路由懒加载)
目录 react路由1:安装和两种模式react路由2:两种路由跳转 ( 命令式与编程式)2-1 路由跳转-命令式2-2 路由跳转-编程式 - 函数组件2-2-1 app.jsx2-2-2 page / Home.jsx2-2-3 page / About.jsx2-2-4 效果 react路由3:函数…...

Golang 基础语法问答
使用值为 nil 的 slice、map 会发生什么? 允许对值为 nil 的 slice 添加元素,但是对值为 nil 的 map 添加元素时会造成运行时 panic。 // map错误示例 func main() {var m map[string]intm["one"] 1 // error: panic: assignment to entry …...

冠达管理:哪里查中报预增?
中报季行将到来,投资者开端重视公司的成绩体现。中报预增是投资者最关心的论题之一,因为这意味着公司未来成绩的增加潜力。但是,怎么查找中报预增的信息呢?本文将从多个视点分析这个问题。 1.证券交易所网站 证券交易所网站是投资…...

docker安装Oracle11gR2
文章目录 目录 文章目录 前言 一、前期准备 二、具体配置 2.1 配置oracle容器 2.2 配置navicat连接 总结 前言 使用docker模拟oracle环境 一、前期准备 安装好docker #拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g #启动 docker run -…...

unity 之 Input.GetMouseButtonDown 的使用
文章目录 Input.GetMouseButtonDown Input.GetMouseButtonDown 当涉及到处理鼠标输入的时候,Input.GetMouseButtonDown 是一个常用的函数。它可以用来检测鼠标按键是否在特定帧被按下。下面我会详细介绍这个函数,并举两个例子说明如何使用它。 函数签名…...
链游再进化 Web3版CSGO来袭
过去几年,游戏开发者们一直希望借Web3这个价值流通网络,改造传统游戏的经济系统,将虚拟资产的掌管权交给用户,让资产自由地在市场流通。 Web3游戏发展史上,涌现过CryptoKitties、Axie Infinity两大爆款,但…...

WordPress用于您的企业网站的优点和缺点
如今,WordPress 被广泛认为是一个可靠、可扩展且安全的平台,能够为商业网站提供支持。然而,许多人质疑 WordPress 是否是适合企业的平台。 这就是我们创建本指南的原因。通过探索 WordPress 的优点和缺点,您可以确定世界上最受欢…...
~600行ANSI C代码实现RISC-V CPU核
今天在GitHub上看到一个C语言项目,用大约600行代码实现了一个RISC-V CPU核,甚为感叹,分享一下。不管是学习C,还是学习RISC-V,这个项目都有非常高的学习价值,开源万岁! rv 用 ANSI C 编写的RISC…...
【从零学习python 】55.Python中的序列化和反序列化,JSON与pickle模块的应用
文章目录 序列化和反序列化JSON模块pickle模块进阶案例 序列化和反序列化 通过文件操作,我们可以将字符串写入到一个本地文件。但是,如果是一个对象(例如列表、字典、元组等),就无法直接写入到一个文件里,需要对这个对象进行序列…...

【C++】详解内存中的堆和栈
2023年8月20日,周日早上 感觉很多东西还没吃透,很多疑问还没解决。 这篇文章可能会不定期更新。 还没解释为什么栈的空间有限,而堆的空间很大 还没解释栈和堆在内存中的位置 ...... 目录 怎么申请栈空间语法举例说明 怎么申请堆空间语法…...

QCustomPlot横坐标为毫秒级的时间轴数据展示的实时刷新数据功能
头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();int realtime…...

STM32/AT32 MCO管脚输出时钟配置
前言:最近在学以太网通讯,发现RMII接口配置的时钟管脚有MCU自己输出,想要看看是怎么输出的,对此进行记录 1、交接项目项目上使用的是PA8管脚来输出时钟50MHZ,提供给上面refclk。 先看手册 PA8的复用功能具备将MCU时钟…...

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价
近年来,国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究,他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合,评价不同类型研究区的生态脆弱特征,其研究内容…...

【大虾送书第六期】搞懂大模型的智能基因,RLHF系统设计关键问答
目录 ✨1、RLHF是什么? ✨2、RLHF适用于哪些任务? ✨3、RLHF和其他构建奖励模型的方法相比有何优劣? ✨4、什么样的人类反馈才是好的反馈 ✨5、RLHF算法有哪些类别,各有什么优缺点? ✨6、RLHF采用人类反馈会带来哪些局…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
可靠性+灵活性:电力载波技术在楼宇自控中的核心价值
可靠性灵活性:电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中,电力载波技术(PLC)凭借其独特的优势,正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据,无需额外布…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)
更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...

【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...

2025季度云服务器排行榜
在全球云服务器市场,各厂商的排名和地位并非一成不变,而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势,对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析: 一、全球“三巨头”…...