unicloud云开发进阶20-项目4uview组件的tabs标签和Skeleton骨架屏的使用

tabs标签

在uview官网，找到Tabs标签

测试

<template>
	<view class="home">
    <view class="topnav">
       <u-tabs :list="navlist" @click="clickNav"></u-tabs>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        navlist:[
          {
            name:"最新"
          },{
            name:"热门"
          }
        ]
			}
		},
		onLoad() {

		},
		methods: {
      clickNav(e){
        console.log(e);
      }
		}
	}
</script>

<style lang="scss" scoped>

</style>

刷新页面，默认显示的是最新，点击热门后，点击事件e的返回值：

无论是否被选中的项，只要点了，就会有返回值·

tabs的自定义样式

选中时的状态 有三个样式：颜色、粗体、放大

这是在官网示例复制过来的，第一个是选中时，第二个是非选中时，第三个是单独设置每一条

<template>
    <u-tabs
        :list="list4"
        lineWidth="30"
        lineColor="#f56c6c"
        :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }"
        :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    >
    </u-tabs>
</template>

在项目首页测试

<template>
  <view class="home">
    <view class="topnav">
      <u-tabs 
      :list="navlist" 
      :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.08)'
        }" 
        :inactiveStyle="{
          color: '#888',
          transform: 'scale(1)'
        }" 
        @click="clickNav">
        </u-tabs>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navlist: [{
          name: "最新"
        }, {
          name: "热门"
        }]
      }
    },
    onLoad() {

    },
    methods: {
      clickNav(e) {
        console.log(e);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

编辑

.edit就是给编辑功能写的样式

    <view class="edit">
      <text class="iconfont icon-a-21-xiugai"></text>
    </view>
    
    
<style lang="scss" scoped>
  .home {
    .topnav {
      margin-bottom: 30rpx;
    }
    .edit {
      width: 120rpx;
      height: 120rpx;
      background: #0199FE;
      border-radius: 50%;
      color: #fff;
      // 固定定位 -下面三行就是定位的位置
      position: fixed;
      z-index: 100;
      bottom: 150rpx;
      right: 50rpx;
      // 加弹性盒模型-为了下两行使文字居中
      display: flex;
      justify-content: center;
      align-items: center;
      // 加阴影
      box-shadow: 0 0 20rpx rgba(1,153,254,0.8);
      .iconfont {
        font-size: 50rpx;
      }
    }
  }
</style>

Skeleton 骨架屏

两种方法引入，一种是写在插槽里，一种是直接引入

<template>
  <view class="home">
    <view class="topnav">
      <u-tabs 
      :list="navlist" 
      :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.08)'
        }" 
        :inactiveStyle="{
          color: '#888',
          transform: 'scale(1)'
        }" 
        @click="clickNav">
        </u-tabs>
    </view>
    
    <!-- 骨架屏 -->
    <view class="loadingState">
      <u-skeleton
      	rows="3"
      	title
      	loading
        avatar
      ></u-skeleton>
    </view>
    
    <view class="content">
      主体
    </view>
    
    <view class="edit">
      <text class="iconfont icon-a-21-xiugai"></text>
    </view>
  </view>
</template>

通过v-if或v-show控制是否显示,show更合适，因为只显示一次 当获取到数据，将loadingState的值重置为false

<template>
  <view class="home">
    <view class="topnav">
      <u-tabs 
      :list="navlist" 
      :activeStyle="{
          color: '#333',
          fontWeight: 'bold',
          transform: 'scale(1.08)'
        }" 
        :inactiveStyle="{
          color: '#888',
          transform: 'scale(1)'
        }" 
        @click="clickNav">
        </u-tabs>
    </view>
    
    <!-- 骨架屏 -->
    <view class="loadingState" v-show="false">
      <u-skeleton
      	rows="3"
      	title
      	loading
        avatar
      ></u-skeleton>
    </view>
    
    <view class="content">
      主体
    </view>
    
    <view class="edit">
      <text class="iconfont icon-a-21-xiugai"></text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navlist: [{
          name: "最新"
        }, {
          name: "热门"
        }],
        loadingState:false
      }
    },
    onLoad() {

    },
    methods: {
      clickNav(e) {
        console.log(e);
      }
    }
  }
</script>