首页 后端开发 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

热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 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

wallpaper engine怎么设置锁屏壁纸?wallpaper engine使用方法 wallpaper engine怎么设置锁屏壁纸?wallpaper engine使用方法 Mar 13, 2024 pm 08:07 PM

  wallpaperengine是常用于设置桌面壁纸的软件,用户在wallpaperengine里可以搜索自己喜欢的图片来生成桌面壁纸,还支持将电脑中的图片添加到wallpaperengine中设置成电脑壁纸。下面就来看看wallpaperengine设置锁屏壁纸的方法吧。  wallpaperengine设置锁屏壁纸教程  1、首先进入软件,然后选择已安装,点击“配置壁纸选项”。  2、单独设置选择完壁纸后需要点击右下方的确定。  3、再去点击上方的设置选和预览。  4、接下来

wallpaper engine能家庭共享吗 wallpaper engine能家庭共享吗 Mar 18, 2024 pm 07:28 PM

请问Wallpaper是否支持家庭共享呢?很遗憾,不能支持哦。尽管如此,我们仍有解决方案。比如,可以用小号购买或先由大号下载好软件和壁纸,然后再更换到小号。简单启动软件是完全没问题的。wallpaperengine能家庭共享吗答:Wallpaper暂不支持家庭共享功能。1、据了解,WallpaperEngine似乎并不适合家庭共享环境。2、为了解决这个困扰,建议您考虑购买全新账号;3、或者先在主账号下载所需软件和壁纸,再切到其他账号。4、只要轻点打开软件,便无碍。5、您可以在上述网页上查看属性“

四款值得推荐的AI辅助编程工具 四款值得推荐的AI辅助编程工具 Apr 22, 2024 pm 05:34 PM

这个AI辅助编程工具在这个AI迅速发展的阶段,挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率,是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具(并且都支持C#语言),希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手,可帮助你更快、更省力地编写代码,从而将更多精力集中在问题解决和协作上。Git

wallpaper engine的壁纸在哪个文件夹 wallpaper engine的壁纸在哪个文件夹 Mar 19, 2024 am 08:16 AM

用户在使用wallpaper时可以下载各种自己喜欢的壁纸进行使用,有很多用户不知道wallpaper的壁纸在哪个文件夹,用户下载的壁纸存放在content文件夹里。wallpaper的壁纸在哪个文件夹答:content文件夹。1、打开文件资源管理器。2、点击左侧“此电脑”。3、找到“STEAM”文件夹。4、选择“steamapps”。5、点击“workshop”。6、找寻“content”文件夹。

wallpaper engine看片有病毒吗 wallpaper engine看片有病毒吗 Mar 18, 2024 pm 07:28 PM

用户在使用wallpaperengine可以下载各种壁纸,还可以使用动态壁纸,有很多用户不知道wallpaperengine看片有没有病毒,只是视频文件是无法作为病毒的。wallpaperengine看片有病毒吗答:不会。1、只是视频文件是无法作为病毒的。2、只要确保从可信的来源下载视频,并保持电脑的安全防护措施,就可以避免病毒感染的风险。3、应用程序类壁纸是apk格式,apk可能会携带木马病毒。4、WallpaperEngine本身没有病毒,但是创意工坊里的一些应用程序类壁纸可能有病毒。

wallpaper engine耗电多吗 wallpaper engine耗电多吗 Mar 18, 2024 pm 08:30 PM

用户在使用wallpaperengine时可以更改自己的电脑壁纸,有很多用户不知道wallpaperengine耗电多吗,动态壁纸是会比静态壁纸更加耗电一点,但耗得不是很多。wallpaperengine耗电多吗答:不多。1、动态壁纸是会比静态壁纸更加耗电一点,但耗得不是很多。2、开启动态壁纸会增加电脑耗电量,并带走一小小部分内存占用。3、用户不需要担心动态壁纸消耗电比较严重的。

AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 AI程序员哪家强?探索Devin、通义灵码和SWE-agent的潜力 Apr 07, 2024 am 09:10 AM

2022年3月3日,距世界首个AI程序员Devin诞生不足一个月,普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似,平均耗时93秒,解决了12.29%的问题。SWE-agent通过与专用终端交互,可以打开、搜索文件内容,使用自动语法检查、编辑特定行,以及编写和执行测试。(注:以上内容为原内容微调,但保留了原文中的关键信息,未超过指定字数限制。)SWE-A

学习如何利用Go语言开发移动应用程序 学习如何利用Go语言开发移动应用程序 Mar 28, 2024 pm 10:00 PM

Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展,越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言,Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序,并附上具体的代码示例,帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前,我们需要准备好开发环境和工具。首

See all articles