tab.wxml:

全部
中奖
未中奖

全部

中奖

未中奖

tab.wxss:

.swiper-tab {
width: 100%;
border-bottom: 2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 88rpx;
display: flex;
flex-flow: row;
justify-content: space-between;
}

.swiper-tab-item {
width: 30%;
color: #434343;
}

.active {
color: #f65959;
border-bottom: 4rpx solid #f65959;
}

swiper {
text-align: center;
background-color: #fff
}

tab.js:

Page({
data: {
currentTab: 0
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
},

//滑动切换
swiperTab: function (e) {

    this.setData({
        currentTab: e.detail.current
    });
},

//点击切换
clickTab: function (e) {
    if (this.data.currentTab === e.target.dataset.current) {
        return false;
    } else {
        this.setData({
            currentTab: e.target.dataset.current
        })
    }
}

})

微信小程序实现,可滑动、可点击的更多相关文章

  1. 微信小程序列表项滑动显示删除按钮

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...

  2. 微信小程序页面左右滑动事件

    微信小程序提供了页面的上下滚动的事件,在页面的js文件中, page({ onPageScroll(e) { console.log(e.scrollTop) } }) 但是不是滑动事件,滑动事件需要 ...

  3. 微信小程序实现给循环列表点击添加类(单项和多项)

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  4. 微信小程序:防止多次点击跳转(函数节流)

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数 ...

  5. 微信小程序开发——超链接或按钮点击跳转到其他页面失效

    1. 超链接导航失效: 小程序规则——wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

  6. 微信小程序两种滑动方式

    竖向滑动: <scroll-view scroll-y="true" style="height: 200rpx;"> <view style ...

  7. 微信小程序:防止多次点击跳转(函数节流)和防止表单组件输入内容多次验证(函数防抖)

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...

  8. 微信小程序页面跳转绑定点击事件

    https://www.cnblogs.com/mrszhou/p/7931747.html

  9. 第四章 “我要点爆”微信小程序云开发之疯狂点击与糖果点爆页面制作

    疯狂点击点爆方式页面制作 疯狂点击为用户提供一个60秒的按钮点击时间,同时点击过程中有背景音乐,系统根据用户点击按钮的此时来进行热度值的计算. <view class="the_hea ...

  10. 微信小程序开发(三)点击事件

    接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but&quo ...

随机推荐

  1. LeetCode 11月第1周题目汇总

    开源地址:点击该链接 前言 最近一个多月发现以[每天一题]系列的形式来更新题目并不太合适,一是没有足够多合适的题目来更新,二是单独拿出来一个题来讲不太系统,应该把多个相似的题目放在一起讲,这样才能够达 ...

  2. [考试反思]0919csp-s模拟测试47:苦难

    ISOLATION 也不粘上面的了,先管好自己. 附了个近期总分,可以看出什么. 反思一下考试心态: 开场看题目,T1傻逼题不用脑子,T2傻逼板子,T3... 这T3是啥啊?没看懂题目啊?再看一遍.啥 ...

  3. Apache+Tomcat负载均衡

    参考:http://www.cnblogs.com/fly_binbin/p/3881207.html 反向代理负载均衡 (Apache2+Tomcat7/8)  使用代理服务器可以将请求转发给内部的 ...

  4. DAY 3 数论专场

    2019-07-23 今天的题目一个比一个神仙,很早之前就在讨论今天是不是晚上回宾馆就没脑子了,后来发现,是中午.... 一上午就讲了一个PPT,然而标题就两个子---数论... 这谁顶的住....整 ...

  5. 大数据之路day02_1--运算符

    运算符这一节主要是介绍算数运算符.赋值运算符.比较运算符.逻辑运算符.三元运算符.接下来一一介绍. 1.算数运算符 ++ 和 -- 的用法 例如:a++ 和 ++a的区别 %的应用场景(取模其实就是取 ...

  6. PCA降维的原理、方法、以及python实现。

    PCA(主成分分析法) 1. PCA(最大化方差定义或者最小化投影误差定义)是一种无监督算法,也就是我们不需要标签也能对数据做降维,这就使得其应用范围更加广泛了.那么PCA的核心思想是什么呢? 例如D ...

  7. pxe批量部署

    功能: 批量全自动安装操作系统方法: dhcp 自动分配IP tftp 微系统 用来安装系统 httpd 网络源 操作流程: #检查环境 getenforce #检查selinux systemctl ...

  8. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  9. Zabbix-(一) 安装与部署

    Zabbix-(一)安装与部署 一.前言 本文记录在Centos7.6平台 通过yum安装部署Zabbix 4.4 准备 Centos7.6 虚拟机一台(ip: 192.168.152.140) My ...

  10. csp-s2019游记

    11.15D0: 复习 复习 机房里弥漫着颓废的气息,不过也是最后一个下午了 11.16D1: 五点钟爬起来,一边发抖一边去楼下买早饭 虽然平时基本不吃早饭,但考前不行 搭着同学的车去了考点,在车上重 ...