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

news/2024/7/20 2:25:34 标签: 小程序

效果图：

 

 

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

  }
})


http://www.niftyadmin.cn/n/4947109.html

相关文章

[JavaWeb]【二】Vue Ajax Elemnet Vue路由打包部署

[JavaWeb]【二】Vue Ajax Elemnet Vue路由打包部署

目录 一 什么是Vue 1.1 Vue快速入门 1.2 常用指令 1.2.1 v-bind && v-model 1.2.2 v-on 1.2.3 v-if && v-show 1.2.4 v-for 1.2.5 案例 1.3 生命周期 二 Ajax 2.1 Ajax介绍 2.2 同步与异步 2.3 原生Ajax&#xff08;繁琐&#xff0c;过时了&#xff09…
阅读更多...
快速解决Ubuntu 中 wine 程序 中文显示为方块/显示错误/无法显示中文（2023）

快速解决Ubuntu 中 wine 程序 中文显示为方块/显示错误/无法显示中文（2023）

解决办法就是在创建prefix的命令行里加上LANG“zh_CN.UTF8” LC_ALL“zh_CN.UTF8”&#xff0c;并安装cjkfonts&#xff0c;即可。 1、生成prefix、安装cjk字体 以下是基本流程&#xff1a; 现在假定wine和winetricks已经装好&#xff0c; // 先创建一个prefix&#xff0c;按…
阅读更多...
广州华锐互动：3D数字孪生开发编辑器助力企业高效开发数字孪生应用

广州华锐互动：3D数字孪生开发编辑器助力企业高效开发数字孪生应用

3D数字孪生开发编辑器是一种新兴的技术&#xff0c;它可以帮助企业更好地管理和维护其物联网设备。这些工具可以帮助企业实现对设备的实时监控、故障排除和优化&#xff0c;从而提高生产效率和降低成本。 数字孪生系统是一种将物理世界与数字世界相结合的技术&#xff0c;它可以…
阅读更多...
spring boot 实现Redisson分布式锁

spring boot 实现Redisson分布式锁

分布式锁&#xff0c;就是控制分布式系统中不同进程共同访问同一共享资源的一种锁的实现。 1、引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.15.5</versio…
阅读更多...
数据结构--关键路径

数据结构--关键路径

数据结构–关键路径 AOE⽹ 在 带权有向图 \color{red}带权有向图 带权有向图中&#xff0c;以 顶点表示事件 \color{red}顶点表示事件 顶点表示事件&#xff0c;以 有向边表示活动 \color{red}有向边表示活动 有向边表示活动&#xff0c;以 边上的权值表示完成该活动的开销 \…
阅读更多...
系列七、IOC操作bean管理（xml自动装配）

系列七、IOC操作bean管理（xml自动装配）

一、概述 自动装配是根据指定规则&#xff08;属性名称或者属性类型&#xff09;&#xff0c;Spring自动将匹配的属性值进行注入。 二、分类 xml自动装配分为按照属性名称自动装配&#xff08;byName&#xff09;和按照属性类型自动装配&#xff08;byType&#xff09;。 2.1…
阅读更多...
用户参与策略：商城小程序的搭建与营销

用户参与策略：商城小程序的搭建与营销

在现今数字化时代&#xff0c;商城小程序已成为企业私域营销的利器。然而&#xff0c;要使商城小程序在竞争激烈的市场中脱颖而出&#xff0c;不仅需要出色的产品&#xff0c;还需要一个引人入胜的用户参与策略。本文将深入探讨如何在商城小程序中构建和落实有效的用户参与策略…
阅读更多...
自定义WEB框架结合Jenkins实现全自动测试

自定义WEB框架结合Jenkins实现全自动测试

自定义WEB框架结合Jenkins实现全自动测试 allure生成 allure生成 1.allure–纯命令运行 -固定的–稍微记住对应的单词即可。2 安装&#xff0c;2个步骤: 1.下载allure包&#xff0c;然后配置环境变量。 https://github.com/allure-framework/allure2/releases/tag/2.22.4 2.在…
阅读更多...
最新文章

Copyright @ 2022~2023