刷刷题33(uniapp初级实际项目问题-2)

1. Uniapp 中如何定义全局样式?

App.vue<style> 标签中编写全局样式,或通过 uni.scss 文件定义全局 SCSS 变量(需在 vue.config.js 中配置)。全局样式会作用于所有页面。

2. 如何监听页面的滚动事件?

在页面中使用 onPageScroll 生命周期函数:

javascript 复制代码
onPageScroll(e) {
  console.log('滚动距离:', e.scrollTop);
}

注意:频繁触发时需做防抖/节流处理。

3. Uniapp 的路由配置存放在哪里?如何新增一个页面?

路由配置在 pages.jsonpages 数组中。新增页面需在 pages 数组中添加路径:

json 复制代码
{
  "pages": [
    { "path": "pages/home/home", "style": { ... } },
    { "path": "pages/newPage/newPage", "style": { ... } }
  ]
}

4. Uniapp 中如何实现数据双向绑定?

使用 v-model 指令(与 Vue.js 一致):

xml 复制代码
<input v-model="message" />
<script>
export default {
  data() {
    return { message: 'Hello' };
  }
}
</script>

5. 如何修改导航栏标题和样式?

pages.json 中通过 navigationBarTitleTextnavigationBarTextStyle 配置:

json 复制代码
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#007AFF"
      }
    }
  ]
}

6. 如何实现下拉刷新和上拉加载更多?

  • 下拉刷新 ‌:在页面配置中开启 enablePullDownRefresh,使用 onPullDownRefresh 监听事件。
  • 上拉加载 ‌:通过 onReachBottom 监听页面触底事件,手动加载更多数据。

7. Uniapp 中如何上传文件或图片?

使用 uni.chooseImage 选择图片,再通过 uni.uploadFile 上传:

javascript 复制代码
uni.chooseImage({
  success: (res) => {
    uni.uploadFile({
      url: 'https://api.example.com/upload',
      filePath: res.tempFilePaths,
      name: 'file',
      success: (uploadRes) => { console.log(uploadRes.data); }
    });
  }
});

8. 如何处理不同平台的 API 差异?例如,H5 和小程序的支付接口不同。

使用 ‌条件编译 ‌ 或 ‌平台判断‌:

scss 复制代码
// 条件编译
// #ifdef H5
h5Payment();
// #endif

// #ifdef MP-WEIXIN
wxPayment();
// #endif

// 或运行时判断
if (uni.getSystemInfoSync().platform === 'h5') {
  h5Payment();
}

9. 如何调试 Uniapp 应用?如何解决真机调试时的常见问题?

  • 调试工具‌:H5 端用浏览器开发者工具,小程序用对应平台的 IDE(如微信开发者工具)。
  • 真机调试‌:通过 HbuilderX 的"真机运行"功能,确保手机和电脑在同一网络,并开启 USB 调试模式。
  • 常见问题‌:检查端口占用、证书信任问题或网络权限。

10. 在 Uniapp 中如何获取设备信息?

使用 uni.getSystemInfoSync() 或异步方法 uni.getSystemInfo()

arduino 复制代码
const systemInfo = uni.getSystemInfoSync();
console.log('设备型号:', systemInfo.model);
console.log('系统版本:', systemInfo.system);
相关推荐
GISer_Jing2 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
趣多多代言人1 小时前
从零开始手写嵌入式实时操作系统
开发语言·arm开发·单片机·嵌入式硬件·面试·职场和发展·嵌入式
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端