RVZ拜客生活常识网

通过meta的status属性值判断是否 成功获取数据RVZ拜客生活常识网

 methods: {
   async getSwiperList() {
     // '/' 根目录即为在main.js的文件配置的 baseUrl 
     const res = await uni.$http.get('/api/public/v1/home/swiperdata')
     // 调取失败弹出错误提示
     if (res.data.meta.status != 200) {
       uni.showToast({
         title: "数据拉取失败", // 文字显示
         'icon': "error", // 显示错误图标
         "duration": 1500 // 设置停留事件为 1.5s duration - 持续事件
       })
       // 将调用的数据 赋值
       this.swiperList = res.data.message
     }
   }
 }
12345678910111213141516

赋值成功RVZ拜客生活常识网

RVZ拜客生活常识网

四、注意事项！：

这里赋值不能像 原生小程序 调用 this.setData()使用，在小程序中可以使用this.data 更新数据不更新视图和 thsi.setData({}) 数据和视图同步更新（会重新加载数据渲染页面），原理是因为在小程序中 渲染层和逻辑层无法直接数据共享，需要通过evalutejavascipt ，而setData将其封装。RVZ拜客生活常识网

uni-app 框架 比 原生小程序 性能优化好得多， 在小程序中需要使用setData()方法实现差量数据跟新，如果不使用则代码性能不好，那么在实现逻辑交换修改数据会麻烦得多，而uni-app则在底层实现自动差量数据更新，简单而高性能。
uni-app 与 原生小程序 (很不错文章）RVZ拜客生活常识网

五、渲染轮播图UI结构

uswiper 快速生成 轮播代码块
1

• 使用 vue-for 动态循环轮播图数组，循环动态绑定需要标签属性节点前都要加上 :（冒号:是 v-bind的缩写，即动态绑定数据，后面可以跟变量或者变量表达式，如果没有冒号的则为字符串，此时循环会无法显示效果

1234567891011121314151617181920212223242526

效果：RVZ拜客生活常识网

六、轮播图点击页面跳转

相关阅读: