微信小程序选项卡页面切换

简介: 微信小程序选项卡页面切换

选项卡效果切换如下:滑动即可对应切换

wxml代码

<view class='TabSwiper'>
    <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>游戏</view>
    <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>专题</view>
    <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>挑战</view>
</view>
<swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item><view class='swiper_con'>1.游戏</view></swiper-item> 
  <swiper-item><view class='swiper_con'>2.专题</view></swiper-item>
  <swiper-item><view class='swiper_con'>3.挑战</view></swiper-item>  
</swiper>

 wxss代码:

.tab{
   float: left;
   width: 33.3333%;
   text-align: center;padding: 10rpx 0;
 }
.TabSwiper{  
  width: 100%;
  height: 150rpx;
  line-height: 150rpx;
  display: flex;
  flex-direction: row;
  background-color: rgb(248, 248, 248);
  }
.tabBorer{
   border-bottom: 1px solid blue; 
   color: blue;
}
.swiper{
  width: 100%;
}
.swiper_con{
  text-align: center;
  width: 100%; 
  height: 100%; 
  padding: 80rpx 0;
}

js代码:

Page({
  data: {
    currentData: 0,
  },
  //获取当前滑块的index
  bindchange: function (e) {
    const that = this;
    that.setData({
      currentData: e.detail.current
    })
  },
  onLoad: function () {
  },
  //点击切换,滑块index赋值
  checkCurrent: function (e) {
    const that = this;
    if (that.data.currentData === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentData: e.target.dataset.current
      })
    }
  }
})
相关文章
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
小程序 JavaScript
微信小程序实现tab页面切换功能
微信小程序实现tab页面切换功能
127 0
|
索引 小程序 容器
小程序 — 选项卡
前言:在小程序中实现选项卡的功能。 GitHub:https://github.com/Ewall1106/miniProgramDemo 先看一下最终的实现效果: 小程序实现选项卡功能 1、页面结构 使用wx:for对list数组进...
1730 106
|
索引
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示),达到切换展示电影和游戏的目的 代码: 1.
1323 0
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
477 12
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
308 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
207 0
在线课堂+工具组件小程序uniapp移动端源码
|
12月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1834 3
|
12月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
310 0
微信小程序更新提醒uniapp

热门文章

最新文章