weex学习-weexUi加载与wxc-tab-page顶部标签页试用

最新推荐文章于 2025-06-08 09:21:32 发布

原创最新推荐文章于 2025-06-08 09:21:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

个人学习笔记同时被 2 个专栏收录

6 篇文章

订阅专栏

week-ui

1 篇文章

订阅专栏

本文介绍了如何将weex-ui集成到项目中，并重点讲解了在使用wxc-tab-page组件时遇到的问题及解决方案。通过修改.babelrc配置，引入weex组件，并在vue页面中展示示例代码。在处理wxc-tab-page的tab-titles时，由于接口数据结构不匹配导致显示为空，通过修改weex-ui源码中对应的参数名解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

weex-ui是阿里出品的搭配weex使用的UI框架，为了开发weex，我就需要开始试着使用weex-ui，我们首先要将weex加载到我们的项目中去

第一步进入我们的项目中，然后打开CMD，输入：

npm i weex-ui@latest -S

这里开发文档上建议node.js版本号是 >= 8.0, 推荐使用 n 来进行版本管理，同时建议 npm 版本 >= 5，同时推荐使用较新版本的weex

然后让我们来安装babel-preset-stage-0 和 babel-plugin-component 插件，前者用于babel编译，后者用于优化 weex-ui 包的组件引用

npm i babel-plugin-component babel-preset-stage-0 -D

同时在项目目录中寻找到.babelrc文件，然后将其中内容修改为

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

直接复制使用即可，然后在我们的vue页面中，使用import引入我们需要使用的weex组件，代码如下：

import { WxcButton, WxcPopup /*这里填写需要使用的组件，组件名可以去官方文档寻找，逗号隔开*/ } from 'weex-ui';

这样我们就可以开始使用weex-ui了，下面是一段从官方文档中复制，关于wxc-tab-page，也就是weex-ui中的顶部导航栏的代码，然后在其中添加了axios请求数据接口，通过请求的数据修改了导航栏的名称

<template>
  <wxc-tab-page ref="wxc-tab-page"
                :tab-titles="topic"
                :tab-styles="tabStyles"
                title-type="icon"
                :tab-page-height="tabPageHeight"
                @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
    <list v-for="(v,index) in tabList"
          :key="index"
          class="item-container"
          :style="{ height: (tabPageHeight - tabStyles.height) + 'px' }">
      <cell class="border-cell"></cell>
      <cell v-for="(demo,key) in v"
            class="cell"
            :key="key">
        <wxc-pan-item :ext-id="'1-' + (v) + '-' + (key)"
                      url="https://h5.m.taobao.com/trip/ticket/detail/index.html?scenicId=2675"
                      @wxcPanItemPan="wxcPanItemPan">
          <div class="content">
            <text>{{key}}</text>
          </div>
        </wxc-pan-item>
      </cell>
    </list>
  </wxc-tab-page>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
  }

  .border-cell {
    background-color: #f2f3f4;
    width: 750px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: #e0e0e0;
  }

  .cell {
    background-color: #ffffff;
  }

  .content{
    width:750px;
    height:300px;
    border-bottom-width:1px;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  const dom = weex.requireModule('dom');
  import { WxcTabPage, WxcPanItem, Utils, BindEnv } from 'weex-ui';

  // https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js
  import Config from '../config'
  import Vue from 'vue'
  export default {
    components: { WxcTabPage, WxcPanItem },
    data: () => ({
      topic:[],
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles,
      tabList: [],
      demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      tabPageHeight: 1334
    }),
    created () {
      this.tabPageHeight = Utils.env.getPageHeight();
      this.tabList = [...Array(this.tabTitles.length).keys()].map(i => []);
      Vue.set(this.tabList, 0, this.demoList);
      this.axios({
        method:'post',
        data:{
          userId:'',
          page:'1'
        },
        url:url
      }).then((response) =>{          //这里使用了ES6的语法
        console.log(response)       //请求成功返回的数据
        this.topic=response.data.data.bbsTopic
        console.log(this.topic)
      }).catch((error) =>
        console.log(error)//请求失败返回的数据
      )
    },
    methods: {
      wxcTabPageCurrentTabSelected (e) {
        const self = this;
        const index = e.page;
        /* Unloaded tab analog data request */
        if (!Utils.isNonEmptyArray(self.tabList[index])) {
          setTimeout(() => {
            Vue.set(self.tabList, index, self.demoList);
          }, 100);
        }
      },
      wxcPanItemPan (e) {
        if (BindEnv.supportsEBForAndroid()) {
          this.$refs['wxc-tab-page'].bindExp(e.element);
        }
      }
    }
  };
</script>

这时候出现了一个问题，因为weexUi导航栏加载数据的时候， :tab-titles的取值取到的是数组中title参数，而我的接口中没有title这个参数，结果导致导航栏加载完成后就是空白的，为了解决这个问题，我们需要找到node_modules文件夹下我们安装week-ui文件夹，然后找到其中的wxc-tab-page文件夹下的index.vue

然后找到下面的代码

看到其中的v.title了吗，记得，有两个

:aria-label="`${v.title?v.title:'标签'+index}`">

以及

 class="tab-text">{{v.title}}</text>

将title修改成你需要调用的参数名，这样就可以加载成功

今天的笔记就到这里

谢谢观看

我是你们的狐狸