专栏首页达达前端微信小程序实现标签页滑块效果

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

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

案例一

小程序完整代码:

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": "消息"
}

案例二:

效果图:

案例二

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [mini-blog]小程序后台管理功能的实现

    由于「后台管理」的部分只有管理员才能看到,在我的小程序上不能体现,但整体开发难度不是很大,主要还是通过编码实现一些功能,思路清晰,按照流程一步一步开发即可。

    Bug生活2048
  • 朋友圈长文不折叠神器

    前一段时间,微信朋友圈悄悄改版,当你发一段长文字的时候,就会被折叠成一行,需要点击进去才能看到详细内容,如下图示:

    谭庆波
  • 某音去水印视频下载小程序,有点东西

    短视频时代五花八门的内容,一不留神就被吸引过去,一划半天就过去了,好像中毒一样一样的,希望大家要控制住自已鸭。

    IT小侠公社
  • 从零学Python(案例源码)

    https://gitee.com/itcode-itcode/Python.git

    程序源代码
  • 扫雷与算法:如何随机化的布雷(二)之洗牌算法

    先来思考一个问题:有一个大小为 100 的数组,里面的元素是从 1 到 100 按顺序排列,怎样随机的从里面选择 1 个数?

    五分钟学算法
  • 浅谈 Python 中的多线程。

    大家好,我是 Rocky0429,今天我来写一下 Python 中的多线程。在正式开始之前,我先用比较通俗的语言给大家介绍几个比较重要的概念。

    Rocky0429
  • 词向量游戏:梅西-阿根廷+葡萄牙=?

    自从把腾讯词向量对接到AINLP公众号后台后,发现相似词相关的查询需求是逐渐增大的,已经不止一次有非CS专业的同学通过后台查询相似词或者相似度来做课程设计,这让...

    AINLP
  • 一篇搞定,小程序从零开发到上线

    1:注册 用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: https://mp.weixin.qq.com/ 。

    谭庆波
  • 小程序测试之路_心得和坑儿

    解决办法 测试过程中可以将测试人员测试帐号开启开发者模式,这样就可以使用Debug模式进行测试了,如图

    用户5521279
  • 开发小程序中,微信支付如何设置?

    Ø MCHID:指的是微信支付商户号,可以登录微信支付商户后台(pay.weixin.qq.com),在【账户设置->账户信息】中查看

    网博资源

扫码关注云+社区

领取腾讯云代金券