zoukankan      html  css  js  c++  java
  • 微信小程序之tab切换

    .wxml

    <view class="select_box">
      <scroll-view scroll-x="true" style="white-space:nowrap" class="nav_select">
        <text 
          class="select_item {{currentTab==index?'red':''}}" 
          wx:for="{{likes}}"
          wx:key 
          bindtap='selected_tap' 
          data-index='{{index}}'
          data-current='{{index}}'>
          {{item.title}}
        </text>
      </scroll-view>
      <view 
       class="selected_view {{currentTab==index?'show':''}}"
       current='{{currentTab}}'
       wx:for="{{likes}}"
       wx:key  >
        {{item.text}}
      </view>
    </view>

    .wxss

    .selected_view{
      display: none;
    }
    .red{
      color:red;
    }
     .show{
      display: block;
    } 

    .js

    Page({
      data:{
       likes:[
          {title:'排行',text:'22'},
          { title: '推荐', text: '22' },
          { title: '游戏·', text: '12' },
          { title: '穿越', text: '2' },
          { title: '恋爱', text: '22' },
          { title: '耽美', text: '22' },
          { title: '玄幻', text: '22' },
          { title: '古风', text: '22' },
          { title: '都市', text: '22' },
          { title: '修真', text: '22' }
        ],
        currentTab:0
      },
      selected_tap:function(e){
           console.log(e)
           var that=this;
        if (that.data.currentTab === e.target.dataset.current){
           return false
        }else{
           that.setData({ currentTab: e.target.dataset.current})
        }
        console.log(e.target.dataset.index);
      }
    })
  • 相关阅读:
    初賽
    SA
    高斯-约旦消元法
    AC自动机
    KMP
    关于scanf
    网络流
    常用SQL语句
    Java开发中的23种设计模式详解(转)
    generatorConfig.xml
  • 原文地址:https://www.cnblogs.com/wdxue/p/9023444.html
Copyright © 2011-2022 走看看