移动端手写tab栏

骑猪看日落 2021-09-07 06:00 472阅读 0赞

### Demo ###

### 使用Vue.js实现 ###

--------------------

**javascript**

new Vue({
    
    el: "#app",
    
    data: {
    
    //可以手写 可以掉后台接口 二选一
    eleFileList: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',  
    
    '守望先锋'
    
    ],
    
    activeName: '',    //选中样式
    
    },
    
     //获取接口中的内容
    mounted() {
        if (Array.isArray(this.eleFileList) && this.eleFileList.length) {
          this.content = this.eleFileList[0].contractTemplateContent;
        }
      },
    
    
      methods: {
      //定义事件
        switchContract(item) {
          this.content = item.contractTemplateContent;
          console.log(item)
          this.activeName =item;  
        }
    
    },
    
    })

**html**

<li
            @click="switchContract(item)"     //点击事件
            v-for="(item, index) in eleFileList"  //循环接口
            :key="index"
            :class="{active: activeName == item}"  //获取选中内容
          >
             //展示的内容
            <a >{
       { item.contractTemplateName }}</a>
          
          </li>

css

添加**.active  设置高亮的样式即可实现**

发表评论取消回复

表情：

评论列表（有 0 条评论，472人围观）

还没有评论，来说两句吧...

相关阅读

相关手写Redis客户端

一、前言要想手写Redis客户端，必须先了解清楚Redis的通信协议是什么。我的理解就是客户端与服务端按照双方约定的规则来进行的编码方式，客户端将要发送的命令进行编码，

清疚/ 2023年07月15日 05:53/ 0 赞/ 9 阅读

相关 vantui+vue写移动端项目练手（下）

短信登录用到的函数： ![在这里插入图片描述][20210506145737701.png] 短信验证逻辑：点击发送验证码会向后端发送请求由后端处理，后端将生成的验证码

墨蓝/ 2023年01月18日 12:28/ 0 赞/ 17 阅读

相关 tab栏切换

tab栏切换 1、jquery方式首先引入 jquery.js 文件 <style type="text/css"> {

分手后的思念是犯贱/ 2022年12月28日 11:08/ 0 赞/ 201 阅读

相关可滑动移动端tab选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conten

川长思鸟来/ 2022年12月08日 04:48/ 0 赞/ 233 阅读

相关 vantui+vue写移动端项目练手（上）

前言：本人属于垃圾码农一枚，此项目纯属练手，内容全部由本人自己构思，图片以及icon不属于本人原创，接口采用真实数据是自己付费买的，给小白们一起学习学习，需要源码请移步

我就是我/ 2022年11月17日 05:25/ 0 赞/ 197 阅读

相关 html4如何做滑动tab,swiper4实现移动端导航栏tab滑动切换

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下效果如图： ![20201016101841397.jpg][] 首先引入swiper的css和j

秒速五厘米/ 2022年10月06日 11:43/ 0 赞/ 220 阅读

相关原生js写头部tab栏左右滑动支持移动端

前面有一篇功能较完善的，但是是jq和原生混搭的，有朋友只需要原生的，就做了个简单的； 1.css {margin: 0; padding: 0; box-sizin

ゝ一世哀愁。/ 2022年06月09日 08:55/ 0 赞/ 304 阅读

相关 JavaScript实现tab栏

HTML <div id="box"> <ul class="clearfix"> <li class="

以你之姓@/ 2022年05月28日 07:58/ 0 赞/ 215 阅读

相关基于canvas的移动端手写插件

mobile-graphics 基于canvas的移动端手写插件 github地址：[https://github.com/fisher-zh/graphics\[ht

ゞ浴缸里的玫瑰/ 2022年05月23日 13:24/ 0 赞/ 241 阅读

相关移动端手写tab栏

Demo 使用Vue.js实现 -------------------- javascript new Vue({ el: "a

骑猪看日落/ 2021年09月07日 06:00/ 0 赞/ 473 阅读