1、cdn引入jq
index.html中:
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
vue.config.js中:
configureWebpack: config => {
config.externals={
'jquery' : '$',
}
}
需要用到的页面中:
import $ from 'jquery';
2、拿取baseURL
main.js中:
const baseUrl = process.env.VUE_APP_BASE_API;
vue.protype.$baseUrl = baseUrl
3、全局设定api和baseurl
public下新建config.js:
let config = {
url:"https://dcl.jnjadc.com",
apiUrl:"https://campaign.jnjadc.com"
}
export default config
main.js中:
import win from '../public/config.js'
const baseUrl = win.apiUrl;
Vue.prototype.$winbaseUrl = win
3、html5自动伸缩放
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
//#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//禁止手机双击放大页面
4、使用before加图标
.local-icon::before {
background: url('~@/static/images/local-pg.png') no-repeat;
background-size: 30rpx 30rpx;
content: '';
display: inline-block;
height: 30rpx;
line-height: 30rpx;
transform: translateY(12%);
width: 30rpx;
}
5、两列,使用flex布局两边对齐,最后一个左对齐
父添加:after
.recommend-container-box:after {
content: '';
width: 48%;
}
//如果每行是4列
/* 如果最后一行是3个元素 */
.list{
display: flex;
justify-content: center;
align-items: center;
width:25%;
height: 50px;
}
.list:last-child:nth-child(3n - 1) {
margin-right: calc(25% + 25% / 2);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(3n - 2) {
margin-right: calc(50% + 25% / 2);
}
6、弹出窗从底部上滑显示
<view v-if="showpop" :class="{'pop-box': showpop}">
<view class="content-box" :class="{'content-box-show': showpop_}">
内容
</view>
</view>
.pop-box{
position: fixed;
top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.50);
transition: 0.3s;
z-index: 1000;
}
.content-box-show{
transition: all 0.3s ease !important;
transform: translateY(0%) !important;
}
.content-box{
position: absolute;
bottom: 0;
width: 100%;
height: 570rpx;
background: $uni-app-bg-color;
border-radius: 30rpx 30rpx 0 0;
transition: all 0.3s ease;
transform: translateY(100%);
z-index: 1999;
}
toShowPop(){
this.showpop=true
setTimeout(()=>{
this.showpop_ = true
},20)
},
移动端滚动不流畅
#app{
width: 100%;
height: 100%;
background: #f9f9f9;
overflow-y: auto;
-webkit-overflow-scrolling:touch //关键这里
}
解决ios的input、select弹起键盘后,页面不回弹问题
<input class="item-input" type="text" v-model="name" placeholder="请输入你的姓名" @blur="blurIn"/>
<select v-model="order.award_id" @blur="blurIn">
<option v-for="item in awards" :value="item.id" :key="item.key">
{{ item.title }}
</option>
</select>
export default {
computed: {
scrollHeight () {
return document.documentElement.scrollTop || document.body.scrollTop || 0
}
}
methods: {
blurIn () {
window.scrollTo(0, Math.max(this.scrollHeight - 1, 0))
}
}
}
h5页面点击关闭时,发送请求
//App.vue页面中
mounted() {
let this_ = this
window.addEventListener("unload", function(event) {//退出时发送使用时间
let time = new Date().getTime() - this_.actiontime
$.ajax({ //要发送同步
url:this_.$baseUrl+"/track/timeOnPage",
data:{"time":time},
type:"get",
async:false
});
});
}
//2:解决小程序使用web-view内嵌H5时,关闭小程序,h5的视频还在播放
mounted() {
document.addEventListener("visibilitychange", ()=> {
if (document.hidden) {
if(this.$refs.videoPlayer){
const Player = this.$refs.videoPlayer[0].player;
Player.pause();
}
}
});
}
禁止移动端选中文字复制:
*{
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;/*禁用页面内容选中和复制操作*/
-webkit-touch-callout:none;/*禁用长按页面时的弹出菜单(iOS下有效)*/
-webkit-tap-highlight-color:rgba(0,0,0,0);/*去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)*/
}
请求头
post+json:
'content-type':'application/json;charset=UTF-8'
表单/上传文件:
'content-type':'application/x-www-form-urlencoded'
h5使用fixed定位盒子到底部时,适配iphonex
height: calc(100px + env(safe-area-inset-bottom));
padding-bottom:env(safe-area-inset-bottom);