zoukankan      html  css  js  c++  java
  • Tab选项卡

    nav.wxml页面:

    <!--nav.wxml-->
    <view class='box'>
      <view class='navH'>
        <view class="{{selected1?'red':'default'}}" bindtap="selected1">服务导航</view>
        <view class="{{selected2?'red':'default'}}" bindtap="selected2">行业观察</view>
      </view>
      
      <view  class="{{selected1?'show':'hidden'}}">
      <!-- 借壳收购 -->
      <block wx:for="{{nav}}" wx:for-item="item">
        <view class='bar'>
          <navigator url="{{item.navList}}">
            <view class='barList'>
              <text>{{item.text}}</text>
              <image src='{{image}}'></image>
            </view>
          </navigator>
        </view>
      </block>
    
      </view>
    
      <view  class="{{selected2?'show':'hidden'}}">
     <!-- 借壳并购案例 -->
      <block wx:for="{{list}}" wx:item="item">
      <view class='bar'>
        <navigator url="/pages/column_list/column_list?id={{item.col_id}}">
          <view class='barList'>
            <text>{{item.col_name}}</text>
            <image src='{{image}}'></image>
          </view>
        </navigator>
      </view>
      </block>
    </view>
    </view>

    nav.wxss页面

    /**nav.wxss**/
    .box .navH{
      width: 100%;
      height: 40px;
      
      padding: 10px;
      display:flex;
      flex-direction: row;
    }
    .box .navH text{
      margin: 5px;
    }
    .default{
      line-height:80rpx;
      text-align:center;
      border-right:1px solid gainsboro;
      color:#000;
      flex:1;
      font-size:16px;
      }
    .red{
      line-height:80rpx;
      text-align:center;
      color:#fc5558;
      flex:1;
      border-right:1px solid gainsboro;
      font-weight:bold;
      font-size:18px;
      }
    .show{
      display:block;
      }
    .show .bar{
      margin-top: 5px;
    }
    .show .bar .barList{
      flex-direction: row;
      padding: 10px;
      border-bottom: 1px solid silver;
      background: lightblue;
      color: #fff;
    }
    .show .bar .barList text{
      font-size: 16px;
    }
    .show .bar .barList image{
       width: 20px;
       height: 20px;
       float: right;
    }
    .hidden{
      display:none;
      }

    nav.js页面

    data: {
        selected1: true,
        selected2: false
      },
      selected1: function (e) {
        this.setData({
          selected2: false,
          selected1: true
        })
      },
      selected2: function (e) {
        this.setData({
          selected1: false,
          selected2: true
        })
      },

    写好这些就可以做出上面的效果了

  • 相关阅读:
    ftrace 使用方法
    在Ubuntu custom kernel上裝perf by compile
    [fw]How to use DISM to install a hotfix from within Windows
    Ubuntu下配置了ssh,但是连接很慢
    Fix invisible cursor issue in Ubuntu 13.10
    超強的Linux指令解釋網站《explainshell.com》,學Linux必備!
    python 读取 log日志的编码问题
    随机森林random forest及python实现
    评分卡系列(三):分类学习器的评估
    评分卡系列(二):特征工程
  • 原文地址:https://www.cnblogs.com/liuling608/p/8876400.html
Copyright © 2011-2022 走看看