搜索
首页后端开发php教程微信开发顶部选择卡
微信开发顶部选择卡Mar 14, 2018 pm 04:40 PM
开发选择顶部

本篇文章讲述了微信开发顶部选择卡,大家对微信开发顶部选择卡不了解的话或者对微信开发顶部选择卡感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧!

微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下。

效果图:


下面直接上代码:

wxml:

<!--pages/index/index.wxml-->
<view class="swiper-tab">
    <view class="tab-item {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">选项一</view>
    <view class="tab-item {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">选项二</view>
    <view class="tab-item {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">选项三</view>
</view>

<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">
    <swiper-item>
        <view>页面一</view>
    </swiper-item>
    <swiper-item>
        <view>页面二</view>
    </swiper-item>
    <swiper-item>
        <view>页面三</view>
    </swiper-item>
</swiper>

wxss:

/* pages/index/index.wxss */
.swiper-tab{
    width: 100%;  
    text-align: center;  
    line-height: 80rpx;
    border-bottom: 1px solid #000;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.tab-item{
    flex: 1;
    font-size: 30rpx;  
    display: inline-block;   
    color: #777777;
}
.on{
    color: red;  
    border-bottom: 5rpx solid red;
}
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }  
.swiper view{  
    text-align: center; 
    padding-top: 100rpx; 
}

js:

// pages/index/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        winWidth:0,
        winHeight:0,
        currentTab:0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;

        /** 
         * 获取系统信息 
         */
        wx.getSystemInfo({

            success: function (res) {
                that.setData({
                    winWidth: res.windowWidth,
                    winHeight: res.windowHeight
                });
            }

        });  
    },
    bindChange: function (e) {

        var that = this;
        that.setData({ currentTab: e.detail.current });

    },
    swichNav: function (e) {

        var that = this;

        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.current
            })
        }
    } ,  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})

以上是实现过程,总体上没什么难度。可以参考参考,大家要是还不太了解的话,可以自己多实现两边就很容易掌握了哦!

相关推荐:

PHP微信开发之翻译功能

PHP微信开发之获取城市天气

以上是微信开发顶部选择卡的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
iBatis和MyBatis:哪个更适合你?iBatis和MyBatis:哪个更适合你?Feb 19, 2024 pm 04:38 PM

iBatis与MyBatis:你应该选择哪个?简介:随着Java语言的快速发展,许多持久化框架也应运而生。iBatis和MyBatis是两个备受欢迎的持久化框架,它们都提供了一种简单而高效的数据访问解决方案。本文将介绍iBatis和MyBatis的特点和优势,并给出一些具体的代码示例,帮助你选择合适的框架。iBatis简介:iBatis是一个开源的持久化框架

CS玩家的首选:推荐的电脑配置CS玩家的首选:推荐的电脑配置Jan 02, 2024 pm 04:26 PM

1.处理器在选择电脑配置时,处理器是至关重要的组件之一。对于玩CS这样的游戏来说,处理器的性能直接影响游戏的流畅度和反应速度。推荐选择IntelCorei5或i7系列的处理器,因为它们具有强大的多核处理能力和高频率,可以轻松应对CS的高要求。2.显卡显卡是游戏性能的重要因素之一。对于射击游戏如CS而言,显卡的性能直接影响游戏画面的清晰度和流畅度。建议选择NVIDIAGeForceGTX系列或AMDRadeonRX系列的显卡,它们具备出色的图形处理能力和高帧率输出,能够提供更好的游戏体验3.内存电

红米Redmi K70如何打开存储权限?红米Redmi K70如何打开存储权限?Feb 23, 2024 pm 12:30 PM

红米RedmiK70是很多用户们都在使用的机型,这款手机自从发布以来一直都保持着很不错的口碑,拥有着超高的性价比。当然,除了性价比以外,红米RedmiK70还有着许多非常实用的功能。那么红米RedmiK70怎么打开存储权限呢?接下来就让小编来为大家介绍一下吧!红米RedmiK70怎么打开存储权限?要打开红米RedmiK70的存储权限,你可以按照以下步骤操作:步骤一:打开手机的设置应用。步骤二:向下滚动并找到“应用管理”或“应用和通知”,然后点击进入。步骤三:在应用管理中,找到你想要打开存储权限的

kafka可视化工具对比分析:如何选择最合适的工具?kafka可视化工具对比分析:如何选择最合适的工具?Jan 05, 2024 pm 12:15 PM

如何选择合适的Kafka可视化工具?五款工具对比分析引言:Kafka是一种高性能、高吞吐量的分布式消息队列系统,被广泛应用于大数据领域。随着Kafka的流行,越来越多的企业和开发者需要一个可视化工具来方便地监控和管理Kafka集群。本文将介绍五款常用的Kafka可视化工具,并对比它们的特点和功能,帮助读者选择适合自己需求的工具。一、KafkaManager

揭秘Pip镜像源:如何选择最适合个人需求的镜像源?揭秘Pip镜像源:如何选择最适合个人需求的镜像源?Jan 16, 2024 am 09:26 AM

Pip镜像源大揭秘:如何选择最适合你的镜像源?简介:Pip是Python中最常用的软件包管理工具之一,能够方便地安装、升级和移除Python包。在使用Pip的过程中,选择适合自己的镜像源可以显著提高安装速度和稳定性。本文将为大家介绍常见的几种镜像源,并提供具体的代码示例,以便读者可以轻松选择最适合自己的镜像源。一、什么是镜像源?在使用Pip

Win11 24H2更新失败了解决方法?Win11 24H2更新失败了问题解析Win11 24H2更新失败了解决方法?Win11 24H2更新失败了问题解析Feb 23, 2024 am 10:30 AM

Win1124H2更新失败了怎么办是很多用户们在询问的一个问题,可能是用户们的硬件要求不足的情况,由于现在还没正式发布Win1124H2版本,用户们可以选择安装win1123h2的最新版本,下面就让本站来为用户们来仔细的介绍一下Win1124H2更新失败了问题解析吧。Win1124H2更新失败了问题解析可能是用户们的电脑硬件要求不足的情况,用户们可以下载石大师装机工具或者是系统之家装机工具来进行安装。但是由于现在win1124h2版本还没正式的发布,用户们可以选择安装win1123h2最新版本来

在大数据场景下的MySQL储存引擎选择:MyISAM、InnoDB、Aria对比分析在大数据场景下的MySQL储存引擎选择:MyISAM、InnoDB、Aria对比分析Jul 24, 2023 pm 07:18 PM

在大数据场景下的MySQL储存引擎选择:MyISAM、InnoDB、Aria对比分析随着大数据时代的到来,传统的储存引擎在面对高并发、大数据量的情况下往往无法满足业务需求。MySQL作为最流行的关系型数据库管理系统之一,其储存引擎的选择显得尤为重要。在本文中,我们将对大数据场景下MySQL常用的储存引擎MyISAM、InnoDB、Aria进行对比分析,并给出

为什么学习Python是一个明智的职业选择?为什么学习Python是一个明智的职业选择?Sep 08, 2023 pm 01:45 PM

为什么学习Python是一个明智的职业选择?Python,作为一门易学易用且功能强大的编程语言,正日益成为职场人士的首选。无论你是初学者还是有一定编程经验的专业人士,学习Python都是一个明智的职业选择。本文将探讨学习Python的优势,并提供一些Python代码示例来帮助读者更好地理解。Python的易学性相比其他编程语言,Python具备非常低的学习曲

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具