当前位置: 首页 > news >正文

小程序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一个轮播显示一个半内容且实现无缝滚动

效果图&#xff1a; wxml&#xff08;无缝滚动&#xff1a;circular"true"&#xff09;&#xff1a; <!--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原型图,外卖众包配送原型设计图

作品概况 页面数量&#xff1a;共 110 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;外卖配送、生鲜配送 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本品为外卖订餐骑手端APP原型设计图&#x…...

DataGridView keydown事件无法在C#中工作

原因&#xff1a;单元格内编辑文本时,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/** # 设置权…...

电商数据采集和数据分析

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

react 11之 router6路由 (两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由,layout组件、路由懒加载)

目录 react路由1&#xff1a;安装和两种模式react路由2&#xff1a;两种路由跳转 &#xff08; 命令式与编程式&#xff09;2-1 路由跳转-命令式2-2 路由跳转-编程式 - 函数组件2-2-1 app.jsx2-2-2 page / Home.jsx2-2-3 page / About.jsx2-2-4 效果 react路由3&#xff1a;函数…...

Golang 基础语法问答

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

冠达管理:哪里查中报预增?

中报季行将到来&#xff0c;投资者开端重视公司的成绩体现。中报预增是投资者最关心的论题之一&#xff0c;因为这意味着公司未来成绩的增加潜力。但是&#xff0c;怎么查找中报预增的信息呢&#xff1f;本文将从多个视点分析这个问题。 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 当涉及到处理鼠标输入的时候&#xff0c;Input.GetMouseButtonDown 是一个常用的函数。它可以用来检测鼠标按键是否在特定帧被按下。下面我会详细介绍这个函数&#xff0c;并举两个例子说明如何使用它。 函数签名…...

链游再进化 Web3版CSGO来袭

过去几年&#xff0c;游戏开发者们一直希望借Web3这个价值流通网络&#xff0c;改造传统游戏的经济系统&#xff0c;将虚拟资产的掌管权交给用户&#xff0c;让资产自由地在市场流通。 Web3游戏发展史上&#xff0c;涌现过CryptoKitties、Axie Infinity两大爆款&#xff0c;但…...

WordPress用于您的企业网站的优点和缺点

如今&#xff0c;WordPress 被广泛认为是一个可靠、可扩展且安全的平台&#xff0c;能够为商业网站提供支持。然而&#xff0c;许多人质疑 WordPress 是否是适合企业的平台。 这就是我们创建本指南的原因。通过探索 WordPress 的优点和缺点&#xff0c;您可以确定世界上最受欢…...

~600行ANSI C代码实现RISC-V CPU核

今天在GitHub上看到一个C语言项目&#xff0c;用大约600行代码实现了一个RISC-V CPU核&#xff0c;甚为感叹&#xff0c;分享一下。不管是学习C&#xff0c;还是学习RISC-V&#xff0c;这个项目都有非常高的学习价值&#xff0c;开源万岁&#xff01; rv 用 ANSI C 编写的RISC…...

【从零学习python 】55.Python中的序列化和反序列化,JSON与pickle模块的应用

文章目录 序列化和反序列化JSON模块pickle模块进阶案例 序列化和反序列化 通过文件操作&#xff0c;我们可以将字符串写入到一个本地文件。但是&#xff0c;如果是一个对象(例如列表、字典、元组等)&#xff0c;就无法直接写入到一个文件里&#xff0c;需要对这个对象进行序列…...

【C++】详解内存中的堆和栈

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

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管脚输出时钟配置

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

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价

近年来&#xff0c;国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究&#xff0c;他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合&#xff0c;评价不同类型研究区的生态脆弱特征&#xff0c;其研究内容…...

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

目录 ✨1、RLHF是什么&#xff1f; ✨2、RLHF适用于哪些任务&#xff1f; ✨3、RLHF和其他构建奖励模型的方法相比有何优劣&#xff1f; ✨4、什么样的人类反馈才是好的反馈 ✨5、RLHF算法有哪些类别&#xff0c;各有什么优缺点&#xff1f; ✨6、RLHF采用人类反馈会带来哪些局…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...