当前位置: 首页 > 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采用人类反馈会带来哪些局…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...