在uni-app实战中遇到的问题记录(adding...)

问： 我想跳转到一个页面，这个界面是bar界面，跳转错误
错误提示: [system] navigateTo:fail can not navigateTo a tabbar page

答:

// 原代码
uni.navigateTo({
	url:'../index/index'
})
//修改后的代码
uni.switchTab({
	url:'../index/index'
})

<!==================================================!>

问：当我组件使用onload方法为什么没用?

答：组件和页面的生命周期是不一样的

组件的生命周期

页面的生命周期

应用的生命周期

具体详情见api文档

<!==================================================!>

问: uni-app怎么获取url上带过来的参数

// 跳转前的页面
uni.navigateTo({
	url:`../../pages/search-detail/search-detail?keyword=${this.searchDetail}`
});

// 新页面
onLoad(e) {
	console.log(e);
}

// 显示结果
{keyword: "尝试搜索"}

<!==================================================!>
问: 使用localStorage在真机调试中报错

答: uni-app中有uni.setStorage方法

// 存
uni.setStorage({
	key: 'historySearch',
	data: this.historySearchList,
})

// 取
uni.getStorage({
	key: 'historySearch',
	success(res) {
		this.historySearchList = res.data || []
	}
})

<!==================================================!>
问: 在uni-app中如何使用公用的方法

答: 比如我封装了个公共的request方法
使用方式如下

在main.js引入

import HttpRequest from './common/httpRequest'

Vue.prototype.$Request = HttpRequest

使用，在需要的地方加，比如

getBannerList() {
		this.$Request.get("column/apikey/maxd/type/2/back/5/min_id/1/sort/0/cid/1").then((res) => {
		this.bannerList = res.data;
	})
}

<!==================================================!>
问: 做个加入购物车的功能 点击最外面的div会跳出商品详情，点击加入购物车要阻止外面的点击事件，如何实现

<image @click.stop="addToCart(item)" src="../../static/img/footer/cart-act.png" ></image>

<!==================================================!>

问: uni-app如何使用指令

答：使用filters，例

<text>{{name | formate}}</text>

filters: {
	formate(data) {
		return `${data}--`;
	}
}

<!==================================================!>
问: uni-app在for循环中使用点击事件传参为undefined
例

<view class="index-like-detail-item" v-for="(item, index) in goodsList" :key="item.itemid + index" @click="lookDeatil(item.itemid)"></view>

答：将:key换成:key=“index”

<view class="index-like-detail-item" v-for="(item, index) in goodsList" :key="index" @click="lookDeatil(item.itemid)"></view>