uniapp数据界面

数据绑定与界面渲染

在UniApp中，数据与界面的绑定通过Vue.js的响应式机制实现。在<template>中使用双花括号{{}}或指令（如v-for、v-if）动态渲染数据。

<template>
  <view>
    <text>{{ message }}</text>
    <view v-for="(item, index) in list" :key="index">{{ item.name }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp',
      list: [{ name: 'Item 1' }, { name: 'Item 2' }]
    }
  }
}
</script>

列表渲染优化

长列表推荐使用<scroll-view>或<list>组件提升性能，结合v-for时需为每项添加唯一key。

<scroll-view scroll-y>
  <view v-for="item in longList" :key="item.id">{{ item.text }}</view>
</scroll-view>

条件渲染

通过v-if或v-show控制元素显示，v-if适用于频繁切换的场景，v-show通过CSS切换显示状态。

<view v-if="isVisible">动态显示内容</view>
<view v-show="hasData">数据加载完成</view>

表单数据绑定

使用v-model实现表单输入与数据的双向绑定，支持输入框、单选、多选等表单组件。

<input v-model="inputValue" placeholder="请输入内容" />
<checkbox-group v-model="checkedList">
  <checkbox value="option1" />选项1
</checkbox-group>

数据请求与更新

通过uni.request异步获取数据，更新data后界面自动刷新。

uni.request({
  url: 'https://api.example.com/data',
  success: (res) => {
    this.list = res.data;
  }
});

状态管理

复杂应用可使用Vuex集中管理状态，通过mapState或mapGetters在组件中访问全局数据。

import { mapState } from 'vuex';
computed: {
  ...mapState(['userInfo'])
}

性能优化建议

• 避免频繁操作data，批量更新使用this.$set或Object.assign。
• 大数据列表使用分页或虚拟滚动（如uni-list组件）。
• 静态数据优先存储在本地（uni.setStorageSync）。

跨平台兼容性

通过条件编译处理平台差异，如#ifdef H5或#ifdef MP-WEIXIN，确保各端表现一致。

<!-- #ifdef H5 -->
<view>仅H5平台显示</view>
<!-- #endif -->