小程序swiper控件的使用

news2024/11/25 18:32:42

swiper实现左右滑动,以及tab点击,并且给swiper绑定下拉刷新事件

<view class="swiper-tab">
  <view class="start swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" catchtap="swichNav">私教课</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on-deta' : ''}}" data-current="1" catchtap="swichNav">团体课
  </view>

</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{len*364+120}}rpx" bindchange="bindChange">
  <swiper-item>

<view class="container">
      <scroll-view class="list" style="height: 1220rpx" scroll-y="true" bindscrolltolower="loadMore">
        <block wx:for="{{personCourselist}}" wx:key="index">
    
            <view class="item">
              <view class="imag">
                <image src="{{item.cardImage}}" />
              </view>
              <view class="text-list">
                <text class="one">{{item.cardName}}</text>
                <text class="two">剩余{{item.restNumber}}/{{item.amountNumber}}节课</text>
              </view>
            </view>
       
        </block>
      </scroll-view>

    </view>


  </swiper-item>
  <swiper-item>
    <view class="container">
      <scroll-view class="list" style="height: 1220rpx" scroll-y="true" bindscrolltolower="loadMore">
        <block wx:for="{{contentlist}}" wx:key="index">
       
                <image src="{{item.courseImage}}" />
              </view>
              <view class="text-list">
                <text class="one">{{item.courseName}}</text>
                <text class="two">{{item.totalUser}}/{{item.maxNumber}}人</text>
              </view>
            </view>
  
        </block>
      </scroll-view>

    </view>

  </swiper-item>

</swiper>

js主要代码

swichNav: function (e) {
    var that = this;

    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    }
 
    if (e.target.dataset.current == 1) {
      this.setData({
        contentlist: this.data.contentlist,
        currentPage: this.data.currentPage,
        allPages: this.data.allPages,
        courseType: "团体课",
        currentTab: e.target.dataset.current
      })
    } else if (e.target.dataset.current == 0) {
     
      that.setData({
        courseType: "私教课",
        currentTab: e.target.dataset.current
      })
    }
    // console.log(this.data.courseType)
},

  // 上拉加载更多
  loadMore: function (e) {
    console.log(this.data.courseType+"上拉")

    var _this = this;
    var userId = app.globalData.userData.id
    // 当前页是最后一页
    if (this.data.courseType == '团体课') {
      if (this.data.currentPage == this.data.allPages) {
      
        this.setData({
          loadMoreData: '我也是有底线的',
          hideBottom: false
        })
        return;
      }
     
      var tempCurrentPage = this.data.currentPage;
      var pageSize = this.data.pageSize * 1 + tempCurrentPage * 1;
      this.setData({
        currentPage: tempCurrentPage,
        hideBottom: false
      })
      setTimeout(function () {
        _this.setData({
          hideBottom: true
        })
        _this.loadData(userId, pageSize)
      }, 300)
    }else{
      if (this.data.pcurrentPage == this.data.pallPages) {
        // console.log(this.data.pcurrentPage)
        // console.log(this.data.pallPages)
        this.setData({
          loadMoreData: '我也是有底线的',
          hideBottom: false
        })
        return;
      }
     
      var tempCurrentPage = this.data.pcurrentPage;
      var pageSize = this.data.pageSize * 1 + tempCurrentPage * 1;
      this.setData({
        currentPage: tempCurrentPage,
        hideBottom: false
      })
      setTimeout(function () {
        _this.setData({
          hideBottom: true
        })
        _this.loadPersonCourseData(userId, pageSize)//请求的接口数据
      }, 300)

    }


  },
  bindChange: function (e) {
    var that = this;
    
    if (e.detail.current === 1) {
     
      that.setData({
        contentlist: this.data.contentlist,
        currentPage: this.data.currentPage,
        courseType: "团体课",
        currentTab: e.detail.current
      })

    } else {
    
      that.setData({
        courseType: "私教课",
        currentTab: e.detail.current
      })
    }
    that.setData({ currentTab: e.detail.current });

  },



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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

sed进阶之创建sed实用工具

shell脚本编程系列 加倍行间距 sed $!G data2.txt保留空间的默认值是一个空行&#xff0c;通过G命令可以将保留空间内的内容附加到模式空间内容之后&#xff0c;但是最后一行不需要附加&#xff0c;所以通过排除命令!进行排除 对可能含有空行的文件加倍行间距 sed /^$/d;$!G …

c++11上篇

c11 1.C11简介2.列表初始化2.1 &#xff5b;&#xff5d;初始化2.2 std::initializer_list 3.变量类型推导3.1 auto3.2 decltype3.3 nullptr 4.范围for循环5.final与override6.智能指针7.新增加容器---静态数组array、forward_list以及unordered系列8.默认成员函数控制9.右值引…

C++——类和对象[中]

0.关注博主有更多知识 C知识合集 目录 1.类的默认成员函数 2.构造函数和析构函数基础 3.构造函数进阶 4.析构函数进阶 5.拷贝构造函数 6.运算符重载 7.日期类 7.1输入&输出&友元函数 8.赋值运算符重载 9.const成员函数 9.1日期类完整代码 10.取地址重载 …

pandas简介

pandas的两个主要数据结构是&#xff1a;Series&#xff08;一维数据&#xff09;、DataFrame&#xff08;二维数据&#xff09;。 Series Series是一种类似于NumPy中一维数组的对象&#xff0c;它由一组任意类型的数据以及一组与之相关的数据标签组成。 import pandas as pd…

( 数组和矩阵) 240. 搜索二维矩阵 II ——【Leetcode每日一题】

❓240. 搜索二维矩阵 II 难度&#xff1a;中等 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,1…

排序(快速排序 归并排序)

目录 一、快速排序 思路 动画演示 模板 注意点 二、归并排序 思路 动画演示 模板 注意点 三、习题 1.第k个数 2.数组中的逆序对* 一、快速排序 时间复杂度&#xff1a; 平均情况O(nlog2n) 最坏情况O(n^2) 思路 1. 确定分界点x (可取为q[l]、q[r]或 q[(l r) / 2])…

数据结构---堆的实现

文章目录 前言一、什么是堆&#xff1f;二、堆的实现 1.堆的结构 2.接口实现总结 前言 堆(Heap)是计算机科学中一类特殊的数据结构&#xff0c;是最高效的优先级队列。堆通常是一个可以被看做一棵完全二叉树的数组对象。 一、什么是堆&#xff1f; 现实中我们通常把堆(一种二叉…

如何借助快解析实现Tomcat的外网访问

Tomcat深受Java爱好者喜爱&#xff0c;是一个免费开源的轻量级Web应用服务器&#xff0c;是开发调试JSP程序的首选。在项目开发中&#xff0c;常遇到需要远程调试或外网演示的情况&#xff0c;在没有公网IP、路由器不做映射的情况下&#xff0c;如何将Tomcat发布到外网&#xf…

推荐5款免费好用的chatGPT平台

1 ShellGPT 这是一款出色的客户端&#xff0c;无需APIkey和科学上网即可访问chatGPT3.5以及绘画AI。项目的github地址如下&#xff1a;https://github.com/akl7777777/free-chatgpt-client-pub/&#xff0c;可在主页下载windows、linux和macOS的安装包&#xff0c;安装后即可使…

【C++】线程库互斥量库原子性操作库

文章目录 线程库thread类的介绍线程对象的构造方式thread提供的成员函数获取线程的id的方式线程函数参数join与detach 互斥量库&#xff08;mutex&#xff09;mutex的种类lock_guard和unique_lock 原子性操作库&#xff08;atomic&#xff09;条件变量库&#xff08;condition_…

Docker中应用OpenDDS

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。 容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app)。几乎没有性能开销,可以很容易地在机器和数据…

【网络】网络基础协议概念IPMAC地址

文章目录 网络基础网络的发展历程网络在哪里的问题网络协议栈各部分所处位置&#xff1a;网络协议栈各层的作用网络协议栈分层的目的 网络协议的概念 网络协议协议分层的好处理解各层之间直接通信OSI七层模型TCP/IP五层&#xff08;或四层&#xff09;模型 网络传输基本流程同局…

一个简单的servlet应用

第一个 Servlet 程序 1. 创建项目 使用 IDEA 创建一个 Maven 项目. 1.1、File -> New Project Name:javaservlet2 Location:选择要存放的路径 Language:Java Build system:Maven 点击Create按钮 1.2、Pom.xml引入依赖 依赖包来源&#xff1a; <dependencies> …

kafka 学习,笔记

前置条件&#xff0c;需要安装Java 1 去官网下载Kafka安装包 2 将安装解压缩到C盘根目录 3 在cmd命令行窗口进入kafka是根目录 cd c:\kafka_2.12-3.4.0 4 启动zookeeper服务 卡夫卡的运行需要zookeeper的支持&#xff0c;一般来说我们需要安装zookeeper&#xff0c;但是卡夫卡…

C语言程序设计研究生考试大纲

适用于全部C语言程序设计自命题院校 1.单选&#xff08;30分&#xff09;。 2.判断&#xff08;15分&#xff09;。 3.程序阅读与分析&#xff08;45&#xff09;。 4.编程题&#xff08;60分&#xff09;。 考试总分&#xff1a;150分 考试时间&#xff1a;3小时 考试内容 一…

浏览器点击下载太 LOW,如何提高下载操作的逼格?

文章目录 Part.I IntroductionChap.I 预备知识Chap.II URL Part.II 下载的方式Chap.I PythonChap.II WgetChap.III Curl Reference Part.I Introduction 用浏览器下载东西需要一个一个点击&#xff0c;当需要批量下载的时候&#xff0c;这样操作不免有些繁琐。本文整理了常用的…

指示学习(Instruct Learning)和提示(Prompt Learning)学习区别

https://arxiv.org/pdf/2109.01652.pdf 提出instruct learning的论文 指示学习是谷歌Deepmind的Quoc V.Le团队在2021年的一篇名为《Finetuned Language Models Are Zero-Shot Learners》文章中提出的思想。指示学习和提示学习的目的都是去挖掘语言模型本身具备的知识。不同的是…

安全运营场景下的语言模型应用

接上篇&#xff0c;将安全运营的定义为“使用算法能力提取关键信息”&#xff0c;以此来规避算法误判漏判带来的责任问题&#xff0c;同时提升运营人员的工作效率。在这篇尝试对语言模型的使用方法做一下讨论和分享。 1. 语言模型 先聊一下语言模型。&#xff08;这里刻意规避…

【2023 年第十三届 MathorCup 高校数学建模挑战赛】C 题 电商物流网络包裹应急调运与结构优化问题 赛后总结之31页论文及代码

【2023 年第十三届 MathorCup 高校数学建模挑战赛】C 题 电商物流网络包裹应急调运与结构优化问题 1 题目 电商物流网络由物流场地&#xff08;接货仓、分拣中心、营业部等&#xff09;和物流场 地之间的运输线路组成&#xff0c;如图 1 所示。受节假日和“双十一”、“618”等…

计算机视觉(2)——图像预处理

目录 二、图像预处理 2.1 介绍 2.2 特征提取方法 2.2.1 直方图 2.2.2 CLAHE 2.2.3 形态学运算 2.2.4 空间域处理及其变换 2.2.5 空间域分析及变换 &#xff08;1&#xff09; 均值滤波 &#xff08;2&#xff09;中值滤波 &#xff08;3&#xff09;高斯滤波 &am…