原生H5 520兴趣项目演示
代码已上传至github github代码地址：https://github.com/Miofly/mio.git
移动端适配
<!DOCTYPE html>
<html lang="en" style="overflow: hidden!important;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-touch-fullscreen content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
<meta name=format-detection content="telephone=no">
<meta name=format-detection content="email=no">
<meta name=renderer content=webkit>
<meta name=screen-orientation content=portrait>
<meta name=x5-orientation content=portrait>
<meta name=x5-fullscreen content=true>
<meta name=full-screen content=yes>
<meta name=keywords content="">
<meta name=description content="">
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script type="text/javascript" src="../../js/common/vue.js"></script>
<script type="text/javascript" src="../../js/common/jquery-1.7.2.min.js"></script>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if (clientWidth >= 375) {
docEl.style.fontSize = '100px';
} else {
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
}
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseInt(100 * (clientWidth / 375));
var whileCount = 0;
while (true) {
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var delta = realFs - settedFs;
//不相等
if (Math.abs(delta) >= 1) {
if (delta > 0)
settingFs--;
else
settingFs++;
html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
} else
break;
if (whileCount++ > 100)
break
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
@keyframes scale-up {
0% {
transform: scale(1)
}
100% {
transform: scale(1.1)
}
}
</style>
</head>
html
<body style="font-size: 0.05rem;background: rgb(248, 236, 233);overflow: hidden!important;">
<div id="app" style="height: 100%">
<div v-if="status">
<div>
<img :src="bgImg" style="width: 100%;position: fixed;top: 0.05rem;left: 0;text-align: center">
</div>
<div @click="status = false" style="animation: scale-up 1s linear 0s infinite alternate;position: fixed;left: 0;bottom: 0.5rem;width: 100%;text-align: center">
<img :src="main" style="width: 2.06rem;height: 0.68rem">
</div>
</div>
<div v-if="!status" style="height: 100%">
<div style="width: 100%;text-align: center">
<img :src="avatar" style="width: 1.24rem;height: 1.24rem">
</div>
<div style="width: 100%;text-align: center">
<span style="width:2.37rem;height:0.28rem;font-size:0.20rem;font-weight:500;color:rgba(0,0,0,1);">请选择你的1-6个出租项目</span>
<img @click="random" :src="sjImg" style="width: 0.66rem;height: 0.28rem;margin-left: 0.1rem;margin-top: -0.06rem;">
</div>
<div style="margin-top: 0.18rem;height: 63%;overflow-y: scroll;overflow-x: hidden">
<div @click="choiceBtn(index)" style="position: relative;float: left;margin-left: 0.08rem;margin-top: 0.18rem;" v-for="(item, index) in lists" :key="index">
<img :src="bgIndex.includes(index) ? '../../img/love/Button1@2x.png' : '../../img/love/Button2@2x.png'" style="width: 1.13rem;height: 0.48rem;">
<span style="position: absolute;top: 0.1rem;width:0.96rem;height:0.22rem;font-size:0.16rem;font-weight:600;"
:style="{color: bgIndex.includes(index) ? 'white' : '#DD3333', left: item.name.length == 7 ? '0.12rem' : item.name.length == 3 ?
'0.32rem' : item.name.length >= 5 ? '0.18rem' : '0.24rem'}"
>{{item.name}}</span>
</div>
<div style="position: fixed; bottom: 0rem;left: 0;width: 100%;text-align: center">
<img :src="scPoster" style="width: 2.06rem;height: 0.68rem" @click="chosen"></img>
</div>
</div>
<div v-if="modalStatus" style="position: fixed;top: 45%;width: 80%;left: 10%;background: white;border: 2px solid red;border-radius: 0.1rem;text-align: center;padding: 0.35rem 0;font-size: 0.2rem;font-weight: 600;">
{{ts}}
</div>
</div>
</div>js
<script>
var app = new Vue({
el: '#app',
data() {
return {
bgIndex: [],
status: true,
modalStatus: false,
scPoster: '../../img/love/secondary@2x.png',
sjImg: '../../img/love/Refresh@2x.png',
avatar: '../../img/love/portrait@2x.png',
bgImg: '../../img/love/background@2x.png',
main: '../../img/love/main@2x.png',
colorBtn: '../../img/love/Button2@2x.png',
blackBtn: '../../img/love/Button1@2x.png',
ts: '最多选择6个项目哟！',
lists: [
{id: 1, name: '陪过夜'},
{id: 2, name: '陪逛街'},
{id: 3, name: '干农活'},
{id: 4, name: '抱抱你'},
{id: 5, name: '叫你起床'},
{id: 6, name: '冒充男朋友'},
{id: 7, name: '冒充女朋友'},
{id: 8, name: '陪你打游戏'},
{id: 9, name: '吃好吃的'},
{id: 10, name: '哄你睡觉觉'},
{id: 11, name: '牵牵小手'},
{id: 12, name: '说情话撩你'},
{id: 13, name: '逗你开心'},
{id: 14, name: '帮你洗衣服'},
{id: 15, name: '给你做饭'},
{id: 16, name: '帮你写论文'},
{id: 17, name: '帮你带娃'},
{id: 18, name: '代打前任'},
{id: 19, name: '陪你唱歌'},
{id: 20, name: '跟你撒娇'},
{id: 21, name: '共进晚餐'},
]
}
},
methods: {
choiceBtn(index) {
if (!this.bgIndex.includes(index)) {
if (this.bgIndex.length >= 6) {
this.ts = '最多选择6个项目哟！'
this.modalStatus = true
setTimeout(() => {
this.modalStatus = false
}, 1000)
return;
} else {
this.bgIndex.push(index) // 不存在添加
}
} else {
this.bgIndex.indexOf(index) // 存在删除
console.log(this.bgIndex.indexOf(index))
this.bgIndex.splice(this.bgIndex.indexOf(index), 1)
}
},
chosen() {
if (this.bgIndex == 0) {
this.ts = '请选择您的出租项目~'
this.modalStatus = true
setTimeout(() => {
this.modalStatus = false
}, 1000)
return
}
var arr = ''
for (let i = 0; i < this.bgIndex.length; i++) {
arr = arr + this.lists[this.bgIndex[i]].name + 'AAAA'
}
window.location.href = `http://192.168.3.193:8888/mio/src/html/project/love/share.html?arr=${arr}&num=${this.bgIndex.length}`
},
random() {
this.bgIndex = []
var arr = this.makeRandomArr(this.lists, 6)
for (let i = 0; i < arr.length; i++) {
this.bgIndex.push(arr[i].id)
}
},
makeRandomArr(arrList, num) { // 随机取出数组元素
if (num > arrList.length) {
num = arrList.length
}
const tempArr = arrList.slice(0)
const newArrList = []
for (var i = 0; i < num; i++) {
const random = Math.floor(Math.random() * (tempArr.length - 1))
const arr = tempArr[random]
tempArr.splice(random, 1)
newArrList.push(arr)
}
return newArrList
},
},
})
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-05-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
