您好,欢迎来到欧得旅游网。
搜索
您的当前位置:首页uni-app选项卡制作 ⑥

uni-app选项卡制作 ⑥

来源:欧得旅游网

十、选项卡制作

1.遇到错误:

2.解决问题:

3.this 指向问题

// 指向: get_label_list
uniCloud.callFunction({
  name: "get_label_list",
  success(res) {
    console.log(this);
  },
});

// 指向:vue实例
uniCloud.callFunction({
  name: "get_label_list",
  success: (res) => {
    console.log(this);
  },
});

一 、组件创建

二、scroll-view 组件使用

使用 scroll-view 横向滚动的时候,需要注意,内部需添加一个容器对里面的滚动内容进行包裹

<scroll-view class="tab-scroll" scroll-x="true">
      <view class="tab-scroll-box">
        <view v-for="(item, index) in navList" :key="index" class="tab-scroll-item">{{ item }}</view>
      </view>
 </scroll-view>

三、点击设置按钮跳转到标签设置界面

<view class="tab-icons">
      <uni-icons @click="goLabelAdmin" type="gear" size="26" color="#666"></uni-icons>
    </view>

<script>
// 创建labelAdmin界面之后进行跳转
uni.navitageTo({ url: "/pages/labelAdmin/labelAdmin" });
</script>

四、数据获取

  1. 在 page 界面 onLoad 生命周期内进行_initLableList 方法创建

  2. 定义云函数,获取 label 表中的数据

    "use strict";
    const db = uniCloud.database();
    exports.main = async (event, context) => {
      const collection = db.collection("label");
      const res = await collection.get();
    
      //返回数据给客户端
      return {
        code: 0,
        labelList: res.data,
      };
    };
    
  3. page 下的 index 界面进行数据获取,并将数据传递到 tabBar 组件,unicloud.callFunction 方法进行数据获取

    uniCloud.callFunction({
        name: "get_label_list",
        success:(res)=> {
       	 this.labelList = res.result.labelList
        }
    })
    
  4. tabBar 组件内部 prop 属性进行数据获取

    props: { labelList: Array }
    
  5. 点击选项卡实现高亮效果

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- ovod.cn 版权所有 湘ICP备2023023988号-4

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务