---

pad端适配

1.配置page.json

"globalStyle": {
		  "rpxCalcMaxDeviceWidth": 1097, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
		    "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
		    "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
	}

2.pad端的蓝湖ui设置为750px的大小后开发；

3.使用媒体查询编写959以上样式。

//手机端
@media screen and (max-width:959px){
}
//pad端
@media screen and (min-width:960px){
}

返回首页 使用uni.reLaunch

         //顶部的返回按钮，其他例如底部返回首页用 uni.reLaunch 
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
           var that=this;
			uni.reLaunch({
				url: '/pages/index/index',
				success() {
				}
			})
			return true;
		},

顶部导航栏字体图标使用

{
			"path": "pages/enterList/enterList",
			"style": {
				"navigationBarTitleText": "",
				"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"text": "\ue600",  //iconfont的代码改成此格式
								"fontSrc": "/static/iconfont/iconfont.ttf",
								"fontSize": "",
								"float": "right"
							}
						]
					}
				}
			}

		}


//页面使用与data平级
onNavigationBarButtonTap(e){

}

设置动态的导航栏title

					this.$nextTick(()=>{
				uni.setNavigationBarTitle({
					title: options.type == 1 ? '病例样本入库' : (options.type == 2 ? '菌种入库' : '')
				})		
					})

滚动条锚点定位

<scroll-view :scroll-into-view="toView" :style="contentStyle" :show-bar="false" :scroll-y="true" :scroll-with-animation="true" class="service_item_content">	
		<view class="md" id="md1"  v-html="serviceInfo.cont"></view>
		<view class="md" id="md2"  v-html="serviceInfo.notice"></view>
		<view class="md" id="md3"  v-html="serviceInfo.costExplain"></view>
		<view class="md" id="md4"  v-html="serviceInfo.refundExplain"></view>
		</scroll-view>

changeTab(resIndex) {
	this.current = resIndex
	this.toView = 'md' + (resIndex + 1)
	this.rotateAndScale()
}

滚动条置顶

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" ">

 data() {
        return {
            scrollTop: 0,
            old: {         //之前的滚动条距离顶部的距离
                scrollTop: 0
            }
        }
    },
 methods: {
        scroll(e) {
            this.old.scrollTop = e.detail.scrollTop; // 吧滚动条的高度事实给到old.scrollTop 
        },
       changetabbar(index){    //这里是我自己定义的点击事件
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
				    this.scrollTop = 0
				});
        }，
    }

监听返回操作

onBackPress(){  //H5仅支持右上角的返回
//执行相关操作
 }

		// #ifdef H5
			//监听浏览器返回
			window.addEventListener("popstate", function(e) { 
			 //执行相关操作
			}, false);
			   
		// #endif

手动返回上一页应用于取消按钮返回

export function backUpPage() {
    const canNavBack = getCurrentPages();
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack({
            delta: 1
        });
    } else {
        history.back()
    }
}

阻止ios浏览器放大

// #ifdef H5
window.onload=function () {
                document.addEventListener('touchstart',function (event) {
                    if(event.touches.length>1){
                        event.preventDefault();
                    }
                });

                var lastTouchEnd=0;

                document.addEventListener('touchend',function (event) {
                    var now=(new Date()).getTime();
                    if(now-lastTouchEnd<=300){
                        event.preventDefault();
                    }
                    lastTouchEnd=now;

                },false);

                document.addEventListener('gesturestart', function (event) {
                    event.preventDefault();
                });
            }
            // #endif

移动端隐藏滚动条

App.vue

	::-webkit-scrollbar {
	      width: 1rpx !important;
	      height: 1rpx !important;
	}  
	::-webkit-scrollbar-thumb { //滑块部分  
	      border-radius: 5rpx !important; 
	      background-color: rgb(154, 154, 154, 0.05) !important; 
	}  
	::-webkit-scrollbar-track { //轨道部分  
	      background: unset !important;  
	      border-radius: 5rpx !important;  
	}

隐藏滚动条

	 /* 隐藏滚动条 */
	 :deep(.uni-scroll-view ::-webkit-scrollbar){
	    display: none;
	    width: 0 !important;
	    height: 0 !important;
	    -webkit-appearance: none;
	    background: transparent;
	    color: transparent;
	  }

图片高度自动撑开

<template>
    <view class="bgSwiperContent" :style="swipersData.style">
        <swiper class="bgSwiper" :current="current" circular :style="`height: ${imageHeights[current]}rpx`"
            @change="currentChange">
            <swiper-item class="swiper_item" v-for="item, index in swipersData.data.list" :key="index"
                @click="tabSwiper(item)">
                <image class="bgImage" :src="item.url" @load="load($event, index)"></image>
            </swiper-item>
        </swiper>
    </view>
</template>
<script setup>
import {automaticSkip} from '@/utils/skip.js'
    import {
        ref
    } from 'vue'
    const props = defineProps({
        swipersData: {
            type: Object,
            default: () => {}
        },
    })
    let imageHeights = ref([])
    let current = ref(0)

    /**
     * 当前项改变事件处理函数
     *
     * @param e 事件对象
     * @param e.detail.current 当前项的索引值
     */
    const currentChange = (e) => {
        current.value = e.detail.current
    }

    /**
     * 加载图片并设置其高度
     *
     * @param e 事件对象
     * @param ind 图片索引
     * @returns 无返回值
     */
    const load = (e, ind) => {
        let {
            width: imageWidht,
            height: imageHeight
        } = e.detail;
        // 宽高比
        let ratio = imageWidht / imageHeight;
        let height = 750 / ratio;
        imageHeights.value[ind] = height;
    }
    const tabSwiper = (item) => {
        console.log('点击了', item)
    if (item.jump_url) {
        automaticSkip(item.jump_url)
    }
    }
</script>
<style lang="scss" scoped>
    .bgSwiperContent {
        width: 100%;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
        overflow: hidden;
        border-radius: 0rpx 0rpx 40rpx 40rpx;

        .bgSwiper {
            border-radius: inherit;

            .swiper_item {
                border-radius: inherit;
                height: 100%;

                .bgImage {
                    border-radius: inherit;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>

返回上一页并刷新

if (res.code === 200) {
	const pages = getCurrentPages();
	const prevPage = pages[pages.length - 2]; // 上一个页面
	uni.$u.toast('操作成功');
	setTimeout(() => {
		uni.navigateBack({
			delta: 1,
			success: () => {
				prevPage.$vm.getList(); // 直接调用上个页面的刷新方法 
			}
		});
	}, 1000);
} else {
	uni.$u.toast(res.msg);
}

async onLoad() {
	await this.getList(); // 自定义的刷新函数
},

自定义导航栏使用注意事项

使用uview实现导航的自定义 :fixed=“false” 占位

<up-navbar :fixed="false"  :title='$t("exchangeOrder.txt3")' @leftClick="leftClick" :autoBack="true" bgColor="#F8F8F8"></up-navbar>

当初始页默认登录页，第一次进来后判断是否登录,登录则去首页

App.vue

onLaunch: function() {
			console.log('App Launch')
			let token = uni.getStorageSync('token');
			if (token) {
				uni.reLaunch({
					url: '/pages/home/home',
					success: ()=> {
						// #ifdef APP
						plus.navigator.closeSplashscreen();
						// #endif
					}
				})
			}else {
				// #ifdef APP
				plus.navigator.closeSplashscreen();
				// #endif
			}
		},