微信小程序制作页面内导航栏

描述

项目要写一个页面内的导航栏，功能包括点击更改导航栏的样式，切换数据源。

成果

介绍

首先对导航栏设置flex布局，让三个导航标签评分屏幕，之后设置点击事件，样式改变和数据切换

代码

wxml

<view class="appear-container">
  <!-- 搜索框 -->
  <view class="search">
    <view class="search-box">
      <image class="search-icon" src="./img/search.png" mode="" />
      <input class="search-text" type="text" placeholder="请输入诉求名称" />
    </view>
  </view>
  <!-- /搜索框 -->
  <!-- 导航栏 -->
  <view class="nav">
    <view wx:for="{{navList}}" class="nav-item {{item.index==chosed?'nav-active':''}}" data-index="{{item.index}}" bindtap="navChange">
      {{item.title}}
    </view>
  </view>
  <!-- /导航栏 -->
  <!-- 内容主体 -->
  <view class="content">
    <!-- 遍历数据，同时根据所选导航栏item展示数据源 -->
    <view wx:for="{{chosed==0?contentList:(chosed==1?contentList1:contentList2)}}" class="content-box">
      <view class="box-title">
        {{item.title}}
      </view>
      <view class="box-date">
        {{item.time}}
      </view>
      <view class="content-status {{item.status==0?'content-status-blue':'content-status-green'}} ">
        {{item.status==0?'处理中':'已完成'}}
      </view>
    </view>
  </view>
  <!-- /内容主体 -->
</view>

wxss

.appear-container {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  height: 100vh;
}
/* 搜索框 */
.search {
  padding: 5px 20px;
}

.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 16px;
  background-color: #F5F6F7;
}

.search-icon {
  height: 16px;
  width: 16px;
  margin-right: 10px;
}
/* 导航栏 */
.nav {
  display: flex;
  justify-content: space-evenly;
  height: 44px;
  line-height: 44px;
}

.nav-item {
  height: 98%;
  font-weight: 400;
  font-size: 16px;
  color: #8A8F99;
}

.nav-active {
  color: #000000;
  font-weight: 600;
  border-bottom: 2px solid #549BF0;
}
/* 内容主体 */
.content {
  flex: 1;
  padding: 0 20px;
  background-color: #E9EBEF;
}

.content-box {
  position: relative;
  margin-top: 20px;
  padding: 0 16px;
  overflow: hidden;
  background-color: #fff;
}

.box-title {
  padding: 12px 0;
  color: #2E3033;
  font-weight: 520;
  font-size: 16px;
  word-break: break-all;
  border-bottom: 1px solid #DDE0E4;
}

.box-date {
  padding: 12px 0;
  color: #6A707B;
  font-weight: 400;
  font-size: 14px;
  word-break: break-all;
}

.content-status {
  position: absolute;
  top: 7px;
  right: -20px;
  height: 20px;
  width: 72px;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  transform: rotate(45deg);
}
/* 处理中 */
.content-status-blue{
  color: #549BF0;
  background-color: #EEF6FF;
}
/* 已完成 */
.content-status-green{
  color: #1BBD8C;
  background-color:#E9FCF6
}

ts

Page({
  /**
   * 页面的初始数据
   */
  data: {
    //标签列表
    navList: [
      { title: '全部', index: 0 },
      { title: '处理中', index: 1 },
      { title: '已完成', index: 2 },
    ],
    // 被选中的下标
    chosed: 0,
    // 内容主体数据
    contentList: [
      {
        title: '穿越到古代',
        time: '2022-08-28 15:37',
        status: 1
      },
      {
        title: '当伪装太监',
        time: '2022-07-18 15:37',
        status: 1
      },
      {
        title: '攻略皇帝的嫔妃',
        time: '2022-09-38 15:37',
        status: 0
      }
    ],
    contentList1: [{}],
    contentList2: [{}],
  },

  //监听事件
  //导航栏切换事件
  navChange(e: any) {
    //todo:切换样式  更改index,以便切换主体内容
    //通过更给chosed来更改样式和数据源
    let index = e.currentTarget.dataset.index;
    this.setData({
      chosed: index,
    })
  },

  onLoad() {
    //将拿到的数据进行处理，分类
    var contentList01 = this.data.contentList.filter(currentValue => { return currentValue.status == 0 })
    var contentList02 = this.data.contentList.filter(currentValue => { return currentValue.status == 1 })
    this.setData({
      contentList1: contentList01,
      contentList2: contentList02,
    })
  }

})

总结

通过切换chosed来切换样式和数据源，

继续努力