count-pass-app/subpages/approval/messageList.vue

<template>
  <view class="message-list">
    <view class="tab-list">
      <span class="tab-item" v-for="(item,index) in list" :key="index" @click="curNow = index" :class="curNow == index ? 'active' :''">{{item}}</span>
    </view>
    <view class="swiper-box">
			<template v-if="messageList.length">
				<u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5" v-show="curNow == 0">
					<u-list-item v-for="(item, index) in messageList" :key="index">
						<view class="message-card">
              <view class="card-title">
                <uni-icons custom-prefix="elicon" type="el-icon-s-promotion" size="16" color="#4680F9"></uni-icons>
                价格申请
              </view>
              <p class="card-info">
                善良的咖啡机提交了关于什么什么价格申请......善良的 咖啡机提交了关于什么什么价格申请......
              </p>
						</view>
					</u-list-item>
				</u-list>
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5" v-show="curNow == 1">
					<u-list-item v-for="(item, index) in messageList" :key="index">
						<view class="message-card">
              <view class="card-title">
                <uni-icons custom-prefix="elicon" type="el-icon-s-promotion" size="16" color="#4680F9"></uni-icons>
                授信申请
              </view>
              <p class="card-info">
                善良的咖啡机提交了关于什么什么授信申请......善良的 咖啡机提交了关于什么什么授信申请......
              </p>
						</view>
					</u-list-item>
				</u-list>
        <u-list @scrolltolower="scrolltolower" :preLoadScreen="1.5" v-show="curNow == 2">
					<u-list-item v-for="(item, index) in messageList" :key="index">
						<view class="message-card">
              <view class="card-title">
                <uni-icons custom-prefix="elicon" type="el-icon-s-promotion" size="16" color="#4680F9"></uni-icons>
                采购申请
              </view>
              <p class="card-info">
                善良的咖啡机提交了关于什么什么采购申请......善良的 咖啡机提交了关于什么什么采购申请......
              </p>
						</view>
					</u-list-item>
				</u-list>
			</template>
			<template v-else>
				<u-empty mode="orderTypeList" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
		</view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      list: ['提醒消息', '催办消息', '其他消息'],
      curNow:0,
      messageList:[
        {

        }
      ],
    }
  },
  methods:{
    sectionChange(e){
      this.curNow = e
    }
  }
}
</script>
<style scoped>
/* #ifndef APP-NVUE */
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
page {
  background-color: #f5f7fa;
}
/* #endif */
</style>
<style lang="scss" scoped>
.message-list{
  flex: 1;
  .tab-list{
    background-color: #fff;
    flex-direction: row;
    justify-content: space-evenly;
    .tab-item{
      width: 140rpx;
      line-height: 110rpx;
    }
    .active{
      position: relative;
      &::after{
        content: '';
        width: 80rpx;
        height: 5rpx;
        background-color: #4680f9;
        position: absolute;
        bottom: 0;
        left: 30rpx;
      }
    }
  }
  .swiper-box{
    padding:30rpx 30rpx;
    .message-card{
      padding:0 30rpx;
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 30rpx;
      .card-title{
        display: flex;
        flex-direction: row;
        font-size: 30rpx;
        line-height: 108rpx;
        border-bottom: 1px solid #F2F2F2;
      }
      .card-info{
        color: #222;
        font-size: 24rpx;
        padding: 30rpx 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>