zoukankan      html  css  js  c++  java
  • 小程序tab切换代码

    <!--index.wxml-->
    <view class="container">
      <view class="navtap" >
        <a data-current="{{setting.current.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'current'?mainColor:oldcolor}};">
          <text>本期试用</text>
          <text class="activeline" style="background-color:{{currentSelect.key == 'current'?mainColor:whiteColor}};"></text>
        </a>
        <a data-current="{{setting.trailer.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'trailer'?mainColor:oldcolor}};">
          <text>即将上线</text>
          <text class="activeline" style="background-color:{{currentSelect.key == 'trailer'?mainColor:whiteColor}};"></text>
        </a>
        <a data-current="{{setting.report.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'report'?mainColor:oldcolor}};">
          <text>试用报告</text>
          <text class="activeline" style="background-color:{{currentSelect.key == 'report'?mainColor:whiteColor}};"></text>
        </a>
        <a data-current="{{setting.mytry.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'mytry'?mainColor:oldcolor}};">
          <text>我的试用</text>
          <text class="activeline" style="background-color:{{currentSelect.key == 'mytry'?mainColor:whiteColor}};"></text>
        </a>
      </view>
      <block wx:if="{{currentSelect.key == 'current'}}">
        111
      </block>
      <block wx:if="{{currentSelect.key == 'trailer'}}">
        222
      </block>
      <block wx:if="{{currentSelect.key == 'report'}}">
        333
      </block>
      <block wx:if="{{currentSelect.key == 'mytry'}}">
        444
      </block>
    </view>

    js

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        motto: '首页',
        setting: {
          current: {
            key: "current",
          },
          trailer: {
            key: "trailer"
          },
          report: {
            key: "report"
          },
          mytry: {
            key: "mytry"
          }
        },
        mainColor: '#91d8d2',
        oldcolor: 'grey'
      },
      currentSelect: {},
      onLoad: function () {
         this.setData({
           'currentSelect.key': 'current'
         })
      },
      clickcurrent: function (event) {
        var that = this
        that.setData({
          'currentSelect.key':event.currentTarget.dataset.current
        })  
      } 
    })

    wxss

    /**index.wxss**/
    
    .navtap{
        100%;
        height:40px;
        text-align:center;
        display:flex;
        font-size:15px;
        color:#838995;
        background-color:#fff;
    
    }
    
    .navtap a{
        flex:1;
        color:#838995;
        line-height:38px;
    }
    
    .activeline{
        26px;
        height:2px;
        background-color:#fff;
        display:block;
        margin:0 auto;
    }
    .navtap a {
        flex:1;
        color:#838995;
        line-height:38px;
    }
  • 相关阅读:
    Android strings.xml中定义字符串显示空格
    Android各国语言对照表(values-xxx)
    SimInfo获取(MCC, MNC, PLMN)
    Android APN
    Android studio 运行java程序
    [MyBatis]DAO层只写接口,不用写实现类
    idea代码调试debug篇
    比较分析 Spring AOP 和 AspectJ 之间的差别
    maven进阶:一个多模块项目
    Maven最佳实践:划分模块
  • 原文地址:https://www.cnblogs.com/antyhouse/p/9360653.html
Copyright © 2011-2022 走看看