uniApp
-
组件间跳转
跳转到tabBar页面:uni.switchTab({ url:“xxxx” })
跳转到非tabBar页面:uni.navigateTo({ url:“xxxx”}) -
禁用原生导航栏
例如:禁用首页导航栏。
-
uniapp图片不显示
<image src="../../static/logo.png"></image>
正常引入的图片在app中不显示?改成一下格式即可
<image :src="require('../../static/logo.png')"></image>
-
组件传值
※//父组件引入子组件
//父
<template>
<view>
<testchild></testchild>
</view>
</template>
<script>
import testchild from '../../components/testchild.vue'
export default{
data(){
return{
}
},
components:{
testchild,
},
}
</script>
※ //父组件传值给子组件
//父
<template>
<view>
<testchild :data="data"></testchild>
</view>
</template>
<script>
import testchild from '../../components/testchild.vue'
export default{
data(){
return{
data:['一','二','三']
}
},
components:{
testchild,
},
}
</script>
//子组件通过props进行接收
<template>
<view >
我是子组件
{{data}}
</view>
</template>
<script>
export default{
data(){
return{
}
},
props:['data'],
}
</script>
<style>
</style>
如图所示,子组件获取到了父组件的传值
※//父组件获取子组件的数据
//子组件
<template>
<view >
<button type="default" @click="parentValue">给父组件传值</button>
</view>
</template>
<script>
export default{
data(){
return{
name:'张三',
}
},
methods:{
parentValue(){
this.$emit('myEven',this.name)
}
}
}
</script>
//父组件
<template>
<view>
<text>从子组件获取到得数据:{{name}}</text>
<testchild @myEven="getchild" ></testchild>
</view>
</template>
<script>
import testchild from '../../components/testchild.vue'
export default{
data(){
return{
name:''
}
},
components:{
testchild,
},
methods:{
//这里得参数按照子组件传参的顺序
getchild(name){
console.log(name);
this.name = name;
}
}
}
</script>
- 安装uViewUI并使用
第一步:
前往DCloud插件市场下载uViewUI插件。将下载完的uview-ui目录复制到你项目的根目录下。如下图所示:
第二步:
下载 scss/sass编译
第三步:
在main.js中引入并使用uView的JS库。
import uView from "uview-ui";
Vue.use(uView);
第四步:
引入uView的全局SCSS主题文件,在项目根目录的uni.scss中引入此文件。
@import 'uview-ui/theme.scss';
第五步:
引入uView基础样式,在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
<style lang="scss">
@import "uview-ui/index.scss";
</style>
第六步:
在pages.json中配置easycom组件模式。—配置后重启项目
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
最后一步演示:自己试一试吧。
https://www.uviewui.com/
- 下拉刷新
在某页面 style 选项中开启 enablePullDownRefresh:true;处理完数据刷新后,使用uni.stopPullDownRefresh() 可以停止当前页面的下拉刷新。
- 上拉加载更多
转自huihuihero----上拉加载
前提:安装了uniapp的LoadMore插件(一般初始都会安装此插件), https://ext.dcloud.net.cn/plugin?id=29
<template>
<view class="container">
<view v-for="(item,index) in videoList" :key="index">...</view> //渲染的列表处
<view v-show="isLoadMore"> //loading加载提示处
<uni-load-more :status="loadStatus" ></uni-load-more>
</view>
</view>
</template>
<script>
export default {
data() {
return {
videoList:[],
page:1,
pagesize:10,
loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式
isLoadMore:false, //是否加载中
};
},
onLoad() {
this.getVideoList()
},
onReachBottom(){ //上拉触底函数
if(!this.isLoadMore){ //此处判断,上锁,防止重复请求
this.isLoadMore=true
this.page+=1
this.getVideoList()
}
},
methods:{
getVideoList(){
uni.request({
url: `${this.$baseUrl}/api-video/getlist?page=${this.page}&pagesize=${this.pagesize}`,
method: 'GET',
success: res => {
if(res.data.code==200){
if(res.data.data.list){
this.videoList=this.videoList.concat(res.data.data.list)
if(res.data.data.list.length<this.pagesize){ //判断接口返回数据量小于请求数据量,则表示此为最后一页
this.isLoadMore=true
this.loadStatus='nomore'
}else{
this.isLoadMore=false
}
}else{
this.isLoadMore=true
this.loadStatus='nomore'
}
}else{ //接口请求失败的处理
uni.showToast({title:res.data.msg,icon:'none'})
this.isLoadMore=false
if(this.page>1){
this.page-=1
}
}
},
fail: () => { //接口请求失败的处理
uni.showToast({title: '服务器开小差了呢,请您稍后再试',icon:'none'})
this.isLoadMore=false
if(this.page>1){
this.page-=1
}
},
});
},
}
</script>