微信小程序实现标签页滑块效果

小程序完整代码:

wxml:

<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">留言</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">活动</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">更多</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
<view>
<image src='{{image}}' class='img'></image>
</view>
</swiper-item> <swiper-item>
<view>
<image src='{{image}}' class='img'></image>
</view>
</swiper-item> <swiper-item>
<view>
<image src='{{image}}' class='img'></image>
</view>
</swiper-item> </swiper>

wxss:

Page {
background-color: #f1f1f1;
} .swiper-tab {
background-color: #fff;
width: 100%;
text-align: center;
line-height: 80rpx;
} .swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #797979;
} .on {
color: #ca0c16;
border-bottom: 5rpx solid #ca0c16;
} .swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
} .img {
width: 100%;
height: 540rpx;
}

js:

Page({
data: {
winWidth: 0,
winHeight: 0,
currentTab: 0,
image: "../../images/404.png",
},
onLoad: function(options) { },
onReady: function() {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
// 滑动切换tab
bindChange: function(e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
// 点击tab切换
swichNav: function(e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
onShow: function() { },
onHide: function() { },
onUnload: function() { },
})

json:

{
"navigationBarTitleText": "消息"
}

案例二:

效果图:

代码:

wxml:

<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">待审批</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已审批</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<swiper-item>
</swiper-item> <swiper-item>
</swiper-item>
</swiper>

js:

Page({

  /**
* 页面的初始数据
*/
data: {
winWidth: 0,
winHeight: 0,
currentTab: 0,
},
// 滑动切换tab
bindChange: function(e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
// 点击tab切换
swichNav: function(e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
}, /**
* 生命周期函数--监听页面显示
*/
onShow: function() { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() { }
})

wxss:

Page {
background-color: #f1f1f1;
} .swiper-tab {
background-color: #fff;
width: 100%;
text-align: center;
line-height: 80rpx;
} .swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: 50%;
color: #797979;
} .on {
color: #5fdafe;
border-bottom: 5rpx solid #30d1ff;
} .swiper-box {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}

达叔小生:往后余生,唯独有你

You and me, we are family !

90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通

简书博客: 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

微信小程序实现标签页滑块效果的更多相关文章

  1. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  2. 微信小程序实现“鲜肉APP”首页效果

    项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄 ...

  3. Java的家庭记账本程序(H) :微信小程序 image 标签,在模拟器中无法显示图片?(已解决)

    日期:2019.2.25 博客期:036 星期一 吼!今天我还是继续研究了自己的微信小程序,还没有连接数据库,只是在xml的设计上添加了不少东西,大家可以看我的截图,嗯~说到今天的收获,就是 marg ...

  4. 微信小程序新闻网站列表页

    在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属 ...

  5. 微信小程序text标签

    最近在做小程序,使用<text>标签的时候发现里面的文本text-family不生效, 经过试验,发现直接在text标签的class设置不生效,可以在外层包一个父元素就可以设置了. < ...

  6. 微信小程序之启动页的重要性

    启动页在APP中是个很常见的需求,为什么对于小程序来说也非常重要呢?首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤,到最后为什么要加启动页,看完你就明白了. 小程序的首页需要展示用户关注的小 ...

  7. 微信小程序实现左滑删除效果(原生/uni-app)

    实现效果 列表中侧滑删除 删除不同时存在 scrollview上下滑动与侧滑删除不影响 uni-app实现 html部分 <template> <scroll-view :scrol ...

  8. 微信小程序的标签和html标签比较

    html 小程序 <div></div> <view></view> <h1><h2>....<h6> <p& ...

  9. 微信小程序swiper标签的测试

    swiper属性(具体看官方文档): 一:testswiper.wxml的代码如下.testswiper.js自动生成示例代码. //testswiper.wxml <view > < ...

随机推荐

  1. 十一、eclipse如何创建一个maven工程project

    1. 2. 3. 4. 这是刚创建的工程,因为缺少WEB-INF/web.xml,所以项目会报错 5. 6. 再编写一个web.xml文件,项目就正常了,没有报错:后期需要自己添加对应的pom.xml ...

  2. Unity3D-RayMarch-几何图元-3添加阴影

    效果图: 在RayMarch渲染算法中计算阴影非常简单,当射线碰撞到物体,从碰撞点逆着光源方向再次执行射线步进算法,如果这一过程中碰撞到了其他物体,则碰撞点被其他物体遮挡,该处具有阴影. shader ...

  3. Redhat 7 开通防火墙端口

    1.查看防火墙状态,root用户登录,执行命令systemctl status firewalld 2.开启防火墙:systemctl start firewalld 3.关闭防火墙:systemct ...

  4. 探索未知种族之osg类生物---渲染遍历之认识SceneView

    前言 我们在进行osg程序的开发时,最常用到的场景管理方式是“场景节点树”的结构,     a 场景树底端的叶节点(osg::Geode)包含了各种需要渲染的几何体的顶点和渲染状态信息:     b  ...

  5. Leetcode - 517 Super Washing Machines

    今天开始定期记录本人在leetcode上刷题时遇到的有意思的题目.   517. Super Washing Machines   You have n super washing machines ...

  6. NC 刷新后,停留上一次选择的行(多行)

    如图,我点击批量输入后,会调用列表刷新按钮.但数据之前选择的光标会跳到第一行,原先选择的行就不知道是哪行可.图为最终效果 // 批量输入日期后实时刷新 apply update(batch input ...

  7. ABP 依赖注入

    1.ABP自动注入 //IapplicationService注入方式暴露接 //ITransientDependency 不会暴露接口 ITransientDependency和ISingleton ...

  8. 联想功能 Jquery autocomplete.js输入框联想补全功能

    转载地址:https://www.cnblogs.com/jinzhiming/p/6768402.html

  9. 常用API2 正则表达式

    正则表达式 正则表达式的概念 正则表达式(Regular Expression ,在代码中常简写为regex) 正则表达式是一个字符串,使用单个字符串来描述.用来定义匹配规则,匹配一系列符合某个句法规 ...

  10. T-1-java语言基础

    一.Linux的由来和发展 Linux是开源的操作系统 Linux是服务器端的操作系统 java主要用于服务器端   二.Linux目录结构(与Windows不同) 文件系统不同:Windows是盘符 ...