zoukankan      html  css  js  c++  java
  • 微信小程序自定义选项卡

    本篇博客介绍在微信小程序中如何自定义选项卡

    效果如下:

    shopping.wxml:

    <view class='topTabSwiper'>
      <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap='checkCurrent'>美食</view>
      <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap='checkCurrent'>旅游</view>
      <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}' data-current="2" bindtap='checkCurrent'>生活</view>
      <view class='tab  {{currentData == 3 ? "tabBorer" : ""}}' data-current="3" bindtap='checkCurrent'>特产</view>
      <view class='tab  {{currentData == 4 ? "tabBorer" : ""}}' data-current="4" bindtap='checkCurrent'>热卖</view>
    </view>
    <swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
      <swiper-item>
        <view class='swiper_con'>welcome come to 美食</view>
      </swiper-item>
      <swiper-item>
        <view class='swiper_con'>welcome come to 旅游</view>
      </swiper-item>
      <swiper-item>
        <view class='swiper_con'>welcome come to 生活</view>
      </swiper-item>
      <swiper-item>
        <view class='swiper_con'>welcome come to 特产</view>
      </swiper-item>
      <swiper-item>
        <view class='swiper_con'>welcome come to 热卖</view>
      </swiper-item>
    </swiper>

    shopping.js:

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        currentData: 0,
      },
      //获取当前滑块的index
      bindchange: function (e) {
        const that = this;
        that.setData({
          currentData: e.detail.current
        })
      },
      //点击切换,滑块index赋值
      checkCurrent: function (e) {
        const that = this;
        if (that.data.currentData === e.target.dataset.current) {
          return false;
        } else {
          that.setData({
            currentData: e.target.dataset.current
          })
        }
      }
    })

    shopping.wxss:

    .tab {
      float: left;
       20%;
      text-align: center;
      padding: 10rpx 0;
    }
    
    /* 导航栏整体样式 */
    .topTabSwiper {
      background-color: white;
      padding: 2% 0;
    }
    
    .topTabSwiper:after {
      content: "";
      clear: both;
      display: block;
    }
    
    /* 选中样式 */
    .tabBorer {
      color: red;
      border-bottom: 2px solid red;
    }
    
    .swiper swiper-item {
      text-align: center;
      margin-top: 50rpx;
    }

    END!

  • 相关阅读:
    杭州办理招行香港一卡通(两地一卡通)攻略
    Android高手进阶教程(二十)之Android与JavaScript方法相互调用!
    Android应用的自动升级、更新模块的实现
    18个最好的jQuery表格插件
    系统的本地策略不允许你采用交互式登录
    android中判断横屏或者竖屏并改变背景
    记录几个东东
    jsAnim学习
    win7下安装oracle10g出现未知错误,程序异常终止
    oracle创建用户并授权
  • 原文地址:https://www.cnblogs.com/gygg/p/12660316.html
Copyright © 2011-2022 走看看