zoukankan      html  css  js  c++  java
  • 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡

    实现思路:

    通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示),达到切换展示电影和游戏的目的

    代码:

    1.index.wxml

    <!--index.wxml-->
    <view class="swiper-tab">
        <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">电影</view>
        <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戏</view>
    </view>
    
    <view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>
    <view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>

    2.index.wxss

    .swiper-tab {
       100%;
      text-align: center;
      line-height: 80rpx;
      background-color:white;
    }
    
    .swiper-tab-list {
      font-size: 30rpx;
      display: inline-block;
       50%;
      color: #777;
      border-bottom: 0rpx;
    }
    
    .on {
      color: #da7c0c;
      border-bottom: 2rpx solid #da7c0c;
    }
    
    .swiper-box {
      display: block;
      height: 100%;
       100%;
      overflow: hidden;
    }
    
    .swiper-box view {
      text-align: center;
    }

    3.index.js

    //index.js
    //获取应用实例
    var app = getApp()
    Page( {
      data: {
        isShow: true,
        currentTab: 0,
      },
       
        swichNav: function (e) {
            if (this.data.currentTab === e.target.dataset.current) {
                return false;
            } else { 
                var showMode = e.target.dataset.current == 0;
                this.setData({
                    currentTab: e.target.dataset.current,
                    isShow: showMode
                })
            }
        },
    })

    参考文章:http://blog.csdn.net/qq_31383345/article/details/52900835

    欢迎阅读本系列文章:微信小程序开发教程目录

  • 相关阅读:
    [转].NET委托:一个C#睡前故事
    有关睡觉的学问
    [转]电话号码规范化规则正则表达式
    验证邮件地址的正则表达式
    初学UML之用例图
    没有不可突破的系统……
    生成树协议Spanning Tree Protocol
    两种图片漂浮的代码
    转:静态路由实际应用
    Cisco 2600 NAT 配置 实例
  • 原文地址:https://www.cnblogs.com/xcsn/p/6763208.html
Copyright © 2011-2022 走看看