2020-12-02

uniApp

1. 组件间跳转
   跳转到tabBar页面：uni.switchTab({ url:“xxxx” })
   跳转到非tabBar页面：uni.navigateTo({ url:“xxxx”})

2. 禁用原生导航栏
   例如：禁用首页导航栏。
   

3. uniapp图片不显示
   <image src="../../static/logo.png"></image>
   正常引入的图片在app中不显示？改成一下格式即可
   <image :src="require('../../static/logo.png')"></image>

4. 组件传值

※//父组件引入子组件

//父
<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>

5. 安装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/

6. 下拉刷新
   在某页面 style 选项中开启 enablePullDownRefresh:true；处理完数据刷新后，使用uni.stopPullDownRefresh() 可以停止当前页面的下拉刷新。
   
   
7. 上拉加载更多
   转自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>