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
        })
      },

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

  • 相关阅读:
    《那些年啊,那些事——一个程序员的奋斗史》——26
    《那些年啊,那些事——一个程序员的奋斗史》——26
    《那些年啊,那些事——一个程序员的奋斗史》——26
    Linux系统网络性能实例分析
    数据库服务器的性能调优-续
    数据库服务器的性能调优
    Linux 虚存 linux2.6内核特性
    Linux 虚存的性能问题
    linux系统性能监控--网络利用率
    IIS Express服务器遇到400/503/IIS Express Error的解决办法
  • 原文地址:https://www.cnblogs.com/liuling608/p/8876400.html
Copyright © 2011-2022 走看看