plus.webview.create创建的 webview如何监听h5发送的消息
目前采用的是讨巧的方法
h5页面修改title
document.title = id '|' type;
webview页面监听titleUpdate事件
var w = plus.webview.create(this.wvSrc, 'id',
{
top: uni.getSystemInfoSync().statusBarHeight 50,
height: uni.getSystemInfoSync().windowHeight - 95 - uni.getSystemInfoSync().statusBarHeight
},
{
preload: 'preload webview'
});
//监听titleUpdate
w.addEventListener('titleUpdate', (e) => {
let o = e.title.split("|")[0]
if(isFinite(o)){
this.toBBsDetail(o)
}
});
var currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(w);
不知道还有其他方法没
目前采用的是讨巧的方法
h5页面修改title
document.title = id '|' type;
webview页面监听titleUpdate事件
var w = plus.webview.create(this.wvSrc, 'id',
{
top: uni.getSystemInfoSync().statusBarHeight 50,
height: uni.getSystemInfoSync().windowHeight - 95 - uni.getSystemInfoSync().statusBarHeight
},
{
preload: 'preload webview'
});
//监听titleUpdate
w.addEventListener('titleUpdate', (e) => {
let o = e.title.split("|")[0]
if(isFinite(o)){
this.toBBsDetail(o)
}
});
var currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(w);
不知道还有其他方法没
收起阅读 »uniapp中 自身调用自身 递归调用自己
<view class="">
<template v-for="(secondPl,index) in secondComments">
<view class="leavelMessageRember-item1" >
<view class="contentName">
{{secondPl.userName}} 回复 @{{parentName}}
</view>
<view class="content">
{{secondPl.message}}
</view>
</view>
<view class="" @click="shuouhui" v-if="!secondPl.children" style="padding-left: 5px;color: #aaaaaa;background-color: aliceblue;font-size: 12px;">
收回
</view>
<morePL
@Tback="shuouhui"
:parentName='secondPl.userName'
:secondComments="secondPl.children"
></morePL>
</template>
</view> <view class="">
<template v-for="(secondPl,index) in secondComments">
<view class="leavelMessageRember-item1" >
<view class="contentName">
{{secondPl.userName}} 回复 @{{parentName}}
</view>
<view class="content">
{{secondPl.message}}
</view>
</view>
<view class="" @click="shuouhui" v-if="!secondPl.children" style="padding-left: 5px;color: #aaaaaa;background-color: aliceblue;font-size: 12px;">
收回
</view>
<morePL
@Tback="shuouhui"
:parentName='secondPl.userName'
:secondComments="secondPl.children"
></morePL>
</template>
</view> 收起阅读 »
浏览器信息检测小工具
https://passer-by.com/browser/
进入上方网页可以检测浏览器信息
https://passer-by.com/browser/
进入上方网页可以检测浏览器信息
HBuliderX编译器代码折叠BUG
我最近使用HBuliderX写uniapp小程序的css样式时发现一个比较严重的BUG,在折叠的代码下面继续写新的同级的样式的时候再次展开前面的那个折叠的样式时,会自动将刚刚写好的css样式加入到之前折叠的那个样式当中去,语法是scss。请官方大大能够修复一下或者给个答复,这是编译器特性吗,还是什么。
我最近使用HBuliderX写uniapp小程序的css样式时发现一个比较严重的BUG,在折叠的代码下面继续写新的同级的样式的时候再次展开前面的那个折叠的样式时,会自动将刚刚写好的css样式加入到之前折叠的那个样式当中去,语法是scss。请官方大大能够修复一下或者给个答复,这是编译器特性吗,还是什么。
收起阅读 »2025社区交流小区校园圈子模板
https://ext.dcloud.net.cn/plugin?id=21634
https://ext.dcloud.net.cn/plugin?id=21634
midButton按钮onTabBarMidButtonTap点击事件弹出弹窗
在使用midButton做凸起按钮的时候,在App.vue里使用uni.onTabBarMidButtonTap来监听点击事件,网上都是点击后执行的跳转页面,我想点击后出现弹窗。
把弹窗组件写在App.vue里,代码
<template>
<view>
<customDialog />
<router-view></router-view>
</view>
</template>
不使用router-view页面就是空的,使用router-view下方的tabBar就没了。
应该怎么处理呢?
在使用midButton做凸起按钮的时候,在App.vue里使用uni.onTabBarMidButtonTap来监听点击事件,网上都是点击后执行的跳转页面,我想点击后出现弹窗。
把弹窗组件写在App.vue里,代码
<template>
<view>
<customDialog />
<router-view></router-view>
</view>
</template>
不使用router-view页面就是空的,使用router-view下方的tabBar就没了。
应该怎么处理呢?
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
APP 什么时候支持requestMerchantTransfer 微信确认收款。 现在APP 卡主了
【记录】vue2--->vue3组合式
1、this.$nextTick,替换方案如下:
import { nextTick} from "vue";
nextTick(function() {})
2、uni.createSelectorQuery().in(this),其他相似api需要this应该也是一样的,替换方案如下:
uniapp文档示例(选择组合式api):https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-in
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const that = instance.proxy;
const query = uni.createSelectorQuery().in(that);
评论区”朱小“的发问,加.in(that)和不加的区别。以下是查找到的内容,仅供参考:
3、子组件使用this.$parent,替换方案:props、provide/inject、emits或事件总线
4、子组件使用this.$root.$on("hook:onShow", () => {...相关逻辑})监听父组件onShow生命周期,替换方案如下:
import { onShow } from "@dcloudio/uni-app";
onShow(() => {
...相关逻辑
}) 1、this.$nextTick,替换方案如下:
import { nextTick} from "vue";
nextTick(function() {})
2、uni.createSelectorQuery().in(this),其他相似api需要this应该也是一样的,替换方案如下:
uniapp文档示例(选择组合式api):https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-in
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const that = instance.proxy;
const query = uni.createSelectorQuery().in(that);
评论区”朱小“的发问,加.in(that)和不加的区别。以下是查找到的内容,仅供参考:
3、子组件使用this.$parent,替换方案:props、provide/inject、emits或事件总线
4、子组件使用this.$root.$on("hook:onShow", () => {...相关逻辑})监听父组件onShow生命周期,替换方案如下:
import { onShow } from "@dcloudio/uni-app";
onShow(() => {
...相关逻辑
}) 收起阅读 »
小程序版本
<template>
<view class="tagBall">
<view class="tag" v-for="(item, index) in texts" :key="index" :style="[getTagStyle(index)]">
<view>{{item.userName}}</view>
<view class="dot"></view>
</view>
</view>
</template>
<script>
export default {
props: {
speed: {
type: Number,
default: 0.5
},
texts: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
tagEle: [],
RADIUS: 150,
fallLength: 240,
angleX: Math.PI / 400,
angleY: Math.PI / 400,
tags: [],
liviews: [],
CX: 0,
CY: 0,
timer: null,
clickX: 0,
clickY: 0
};
},
computed: {
getTagStyle() {
return (index) => {
const style = this.liviews[index] || {};
return {
fontSize: ${style.fontSize},
opacity: style.opacity,
transition: style.transition,
filter: style.filter,
zIndex: style.zIndex,
transformStyle: style.transformStyle,
left: ${style.left},
top: ${style.top},
perspective: '20000rpx',
transition: 'all linear 0.1s',
transform: style.transform,
};
};
}
},
destroyed() {
this.clearTimer();
},
mounted() {
this.initTags();
},
methods: {
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
getTags(option) {
this.tagEle = option.tagEle;
this.CX = option.CX;
this.CY = option.CY;
this.init();
},
rotateX() {
const cos = Math.cos(this.angleX this.speed);
const sin = Math.sin(this.angleX this.speed);
for (let i = 0; i < this.tags.length; i++) {
let t = this.tags[i];
const y1 = t.y cos + t.z sin;
const z1 = t.z cos - t.y sin;
t.y = y1;
t.z = z1;
}
},
rotateY() {
const cos = Math.cos(this.angleY this.speed);
const sin = Math.sin(this.angleY this.speed);
for (let i = 0; i < this.tags.length; i++) {
let t = this.tags[i];
const x1 = t.x cos - t.z sin;
const z1 = t.z cos + t.x sin;
t.x = x1;
t.z = z1;
}
},
init() {
this.tags = [];
this.liviews = [];
for (let i = 0; i < this.tagEle.length; i++) {
const k = (2 (i + 1) - 1) / this.tagEle.length - 1;
const a = Math.acos(k);
const b = a Math.sqrt(this.tagEle.length Math.PI);
const x = this.RADIUS Math.sin(a) Math.cos(b);
const y = this.RADIUS Math.sin(a) Math.sin(b);
const z = this.RADIUS Math.cos(a);
const t = this.tag(this.tagEle[i], x / 2, y / 2, z / 2);
this.tags.push(t);
}
this.animate(this.tags);
},
tag(ele, x, y, z) {
return {
ele,
x,
y,
z
};
},
move(t, i) {
const scale = this.fallLength / (this.fallLength - t.z 1.3);
const alpha = (t.z + this.RADIUS) / (2 this.RADIUS);
this.liviews.push({
fontSize: 5 scale + 'px',
opacity: alpha + 0.5,
transition: 'all linear 0.5s',
filter: 'alpha(opacity=' + (alpha + 0.5) 100 + ')',
zIndex: parseInt(scale 100),
transformStyle: 'preserve-3d',
left: t.x + this.CX - t.ele.offsetWidth / 2 + 'px',
top: t.y + this.CY - t.ele.offsetHeight / 2 + 'px',
perspective: '2000rpx',
transformStyle: 'preserve-3d',
transform: scale(${alpha+0.5}),
});
},
animate(x) {
this.clearTimer();
this.timer = setInterval(() => {
this.rotateX();
this.rotateY();
this.liviews = [];
for (let i = 0; i < x.length; i++) {
this.move(x[i], i);
}
}, 25)
},
touchstartscene(e) {
this.clickX = e.touches[0].clientX;
this.clickY = e.touches[0].clientY;
this.clearTimer();
},
touchendscene() {
this.animate(this.tags);
this.clearTimer();
},
touchmovescene(e) {
const fx = this.getDirection(this.clickX, this.clickY, e.touches[0].clientX, e.touches[0].clientY);
let x = this.clickX - e.touches[0].clientX - this.CX;
let y = this.clickY - e.touches[0].clientY - this.CY;
if (fx === 1) {
x = e.touches[0].clientX - this.clickX;
y = e.touches[0].clientY - this.clickY - this.CY;
} else if (fx === 2) {
x = e.touches[0].clientX - this.clickX;
y = e.touches[0].clientY + this.CY;
} else if (fx === 3) {
x = this.clickX + e.touches[0].clientX + this.CX;
y = this.clickY - e.touches[0].clientY - this.CY;
} else {
x = this.clickX - e.touches[0].clientX - this.CX;
y = this.clickY - e.touches[0].clientY - this.CY;
}
this.angleY = x 0.0001;
this.angleX = y 0.0001;
this.rotateX();
this.rotateY();
this.liviews = [];
for (let i = 0; i < this.tags.length; i++) {
this.move(this.tags[i], i);
}
},
getDirection(startx, starty, endx, endy) {
const angx = endx - startx;
const angy = endy - starty;
let result = 0;
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
const angle = Math.atan2(angy, angx) 180 / Math.PI;
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
},
initTags() {
let tagEles = [];
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.tag').boundingClientRect(rects => {
tagEles = rects.map(rect => ({
offsetWidth: rect.width,
offsetHeight: rect.height
}));
}).exec();
query.select('.tagBall').boundingClientRect(rect => {
const CX = rect.width / 2;
const CY = rect.height / 2;
this.getTags({
tagEle: tagEles,
CX,
CY
});
}).exec();
});
}
}
};
</script>
<style scoped>
.tagBall {
height: 214rpx;
position: relative;
perspective: 2000rpx;
transform-style: preserve-3d;
left: 0;
top: 0;
transition: all linear 0.1s;
margin-left: 40rpx;
}
.tag {
width: 150rpx;
position: absolute;
font-weight: 500;
font-size: 12rpx;
color: #000000;
display: flex;
flex-direction: column;
align-items: center;
transition: all ease-in-out 0.3s;
}
.dot {
width: 16rpx;
height: 16rpx;
background: #FCC928;
border-radius: 50%;
margin-top: 10rpx;
}
</style>
<template>
<view class="tagBall">
<view class="tag" v-for="(item, index) in texts" :key="index" :style="[getTagStyle(index)]">
<view>{{item.userName}}</view>
<view class="dot"></view>
</view>
</view>
</template>
<script>
export default {
props: {
speed: {
type: Number,
default: 0.5
},
texts: {
type: Array,
default: () => {
return [];
}
}
},
data() {
return {
tagEle: [],
RADIUS: 150,
fallLength: 240,
angleX: Math.PI / 400,
angleY: Math.PI / 400,
tags: [],
liviews: [],
CX: 0,
CY: 0,
timer: null,
clickX: 0,
clickY: 0
};
},
computed: {
getTagStyle() {
return (index) => {
const style = this.liviews[index] || {};
return {
fontSize: ${style.fontSize},
opacity: style.opacity,
transition: style.transition,
filter: style.filter,
zIndex: style.zIndex,
transformStyle: style.transformStyle,
left: ${style.left},
top: ${style.top},
perspective: '20000rpx',
transition: 'all linear 0.1s',
transform: style.transform,
};
};
}
},
destroyed() {
this.clearTimer();
},
mounted() {
this.initTags();
},
methods: {
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
getTags(option) {
this.tagEle = option.tagEle;
this.CX = option.CX;
this.CY = option.CY;
this.init();
},
rotateX() {
const cos = Math.cos(this.angleX this.speed);
const sin = Math.sin(this.angleX this.speed);
for (let i = 0; i < this.tags.length; i++) {
let t = this.tags[i];
const y1 = t.y cos + t.z sin;
const z1 = t.z cos - t.y sin;
t.y = y1;
t.z = z1;
}
},
rotateY() {
const cos = Math.cos(this.angleY this.speed);
const sin = Math.sin(this.angleY this.speed);
for (let i = 0; i < this.tags.length; i++) {
let t = this.tags[i];
const x1 = t.x cos - t.z sin;
const z1 = t.z cos + t.x sin;
t.x = x1;
t.z = z1;
}
},
init() {
this.tags = [];
this.liviews = [];
for (let i = 0; i < this.tagEle.length; i++) {
const k = (2 (i + 1) - 1) / this.tagEle.length - 1;
const a = Math.acos(k);
const b = a Math.sqrt(this.tagEle.length Math.PI);
const x = this.RADIUS Math.sin(a) Math.cos(b);
const y = this.RADIUS Math.sin(a) Math.sin(b);
const z = this.RADIUS Math.cos(a);
const t = this.tag(this.tagEle[i], x / 2, y / 2, z / 2);
this.tags.push(t);
}
this.animate(this.tags);
},
tag(ele, x, y, z) {
return {
ele,
x,
y,
z
};
},
move(t, i) {
const scale = this.fallLength / (this.fallLength - t.z 1.3);
const alpha = (t.z + this.RADIUS) / (2 this.RADIUS);
this.liviews.push({
fontSize: 5 scale + 'px',
opacity: alpha + 0.5,
transition: 'all linear 0.5s',
filter: 'alpha(opacity=' + (alpha + 0.5) 100 + ')',
zIndex: parseInt(scale 100),
transformStyle: 'preserve-3d',
left: t.x + this.CX - t.ele.offsetWidth / 2 + 'px',
top: t.y + this.CY - t.ele.offsetHeight / 2 + 'px',
perspective: '2000rpx',
transformStyle: 'preserve-3d',
transform: scale(${alpha+0.5}),
});
},
animate(x) {
this.clearTimer();
this.timer = setInterval(() => {
this.rotateX();
this.rotateY();
this.liviews = [];
for (let i = 0; i < x.length; i++) {
this.move(x[i], i);
}
}, 25)
},
touchstartscene(e) {
this.clickX = e.touches[0].clientX;
this.clickY = e.touches[0].clientY;
this.clearTimer();
},
touchendscene() {
this.animate(this.tags);
this.clearTimer();
},
touchmovescene(e) {
const fx = this.getDirection(this.clickX, this.clickY, e.touches[0].clientX, e.touches[0].clientY);
let x = this.clickX - e.touches[0].clientX - this.CX;
let y = this.clickY - e.touches[0].clientY - this.CY;
if (fx === 1) {
x = e.touches[0].clientX - this.clickX;
y = e.touches[0].clientY - this.clickY - this.CY;
} else if (fx === 2) {
x = e.touches[0].clientX - this.clickX;
y = e.touches[0].clientY + this.CY;
} else if (fx === 3) {
x = this.clickX + e.touches[0].clientX + this.CX;
y = this.clickY - e.touches[0].clientY - this.CY;
} else {
x = this.clickX - e.touches[0].clientX - this.CX;
y = this.clickY - e.touches[0].clientY - this.CY;
}
this.angleY = x 0.0001;
this.angleX = y 0.0001;
this.rotateX();
this.rotateY();
this.liviews = [];
for (let i = 0; i < this.tags.length; i++) {
this.move(this.tags[i], i);
}
},
getDirection(startx, starty, endx, endy) {
const angx = endx - startx;
const angy = endy - starty;
let result = 0;
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
const angle = Math.atan2(angy, angx) 180 / Math.PI;
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
},
initTags() {
let tagEles = [];
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.selectAll('.tag').boundingClientRect(rects => {
tagEles = rects.map(rect => ({
offsetWidth: rect.width,
offsetHeight: rect.height
}));
}).exec();
query.select('.tagBall').boundingClientRect(rect => {
const CX = rect.width / 2;
const CY = rect.height / 2;
this.getTags({
tagEle: tagEles,
CX,
CY
});
}).exec();
});
}
}
};
</script>
<style scoped>
.tagBall {
height: 214rpx;
position: relative;
perspective: 2000rpx;
transform-style: preserve-3d;
left: 0;
top: 0;
transition: all linear 0.1s;
margin-left: 40rpx;
}
.tag {
width: 150rpx;
position: absolute;
font-weight: 500;
font-size: 12rpx;
color: #000000;
display: flex;
flex-direction: column;
align-items: center;
transition: all ease-in-out 0.3s;
}
.dot {
width: 16rpx;
height: 16rpx;
background: #FCC928;
border-radius: 50%;
margin-top: 10rpx;
}
</style>
收起阅读 »【TuiPlus】简洁高效 uniapp x UI组件库重磅发布,原生uts插件加持,保障流畅体验,助力快速开发,打造优质原生应用。
项目介绍
> TuiPlus UI组件库 —— 全面兼容最新设计理念。本次重构不仅着眼于功能的提升,更深入探索用户体验的无限可能。我们的组件库致力于打造一个既全面又精致的UI设计平台,强调设计的精致度和扩展性,始终将用户体验放在首位。在细节的打磨上,我们精益求精,自豪地呈现——TuiPlus UI组件库。
> 创新与差异 —— 新版增加了UTS版图表,裁剪等众多组件,我们的专注点在于提供丰富且独特的组件。每一款组件都是经过匠心独运的设计和优化,确保性能卓越。特别是我们的UTS图表组件,采用高性能的canvas技术,实现了无需webview嵌套的纯canvas绘制,带来了行业领先的流畅度和响应速度。TuiPlus UI组件库全面支持iOS、Android以及Web/H5三端,无缝适配多种屏幕尺寸和形态,包括长屏、宽屏、PC、折叠屏和横屏,满足不同场景下的多样化需求。
!
TuiPlus文档地址:https://life.yundie.xyz/t-uvue-ui/docs/index.html
功能特性快速了解
TuiPlus扫码下载体验
web在线体验
安卓下载链接
项目介绍
> TuiPlus UI组件库 —— 全面兼容最新设计理念。本次重构不仅着眼于功能的提升,更深入探索用户体验的无限可能。我们的组件库致力于打造一个既全面又精致的UI设计平台,强调设计的精致度和扩展性,始终将用户体验放在首位。在细节的打磨上,我们精益求精,自豪地呈现——TuiPlus UI组件库。
> 创新与差异 —— 新版增加了UTS版图表,裁剪等众多组件,我们的专注点在于提供丰富且独特的组件。每一款组件都是经过匠心独运的设计和优化,确保性能卓越。特别是我们的UTS图表组件,采用高性能的canvas技术,实现了无需webview嵌套的纯canvas绘制,带来了行业领先的流畅度和响应速度。TuiPlus UI组件库全面支持iOS、Android以及Web/H5三端,无缝适配多种屏幕尺寸和形态,包括长屏、宽屏、PC、折叠屏和横屏,满足不同场景下的多样化需求。
!
TuiPlus文档地址:https://life.yundie.xyz/t-uvue-ui/docs/index.html
功能特性快速了解
TuiPlus扫码下载体验
web在线体验
安卓下载链接
华为外包前端招聘
岗位职责:
1、负责WEB,PC,移动端(iOS、Android)等前端js框架设计及开发、发布和维护;
2、根据产品需求,分析并做出Web 3D的页面前端结构解决方案以及与后台交互整体架构解决方案;
3、与设计、后台开发人员保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作;
4、优化代码,应用前沿技术,不断提高页面性能和用户体验。
任职要求:
1.二本及以上学历;
2、会使用WebGL及其框架three.js、vue.js 等前端技术开发3D页面demo;
3、一年以上前端开发工作经验,代码编写规范,编程基础扎实,熟练掌握openGL、osg、ogre开发且有WebGL经验亦可;
4、精通Web前端技术,包括HTML5/CSS/Javascript等,对性能优化、解决多浏览器兼容性问题有经验;对移动设备前端开发有经验;
5、熟悉w3c标准,对表现与数据分离、web语义化等有深刻理解;
6、自动构建工具(gulp或者grunt)的基本运用;
7、熟悉Angular4以上和Node.js,理解前端MVC逻辑,对路由、模块化和依赖注入有一定的掌握;
8、熟悉业界常见的开源组件,有开源项目开发经验者优先。
待遇环境
薪资:11k-28k。实际多少依据个人能力。
弹性工作制,上下班打卡。
园区健身房、食堂等,晚饭补贴,打车补贴等。
岗位职责:
1、负责WEB,PC,移动端(iOS、Android)等前端js框架设计及开发、发布和维护;
2、根据产品需求,分析并做出Web 3D的页面前端结构解决方案以及与后台交互整体架构解决方案;
3、与设计、后台开发人员保持良好沟通,能快速理解、消化各方需求,并落实为具体的开发工作;
4、优化代码,应用前沿技术,不断提高页面性能和用户体验。
任职要求:
1.二本及以上学历;
2、会使用WebGL及其框架three.js、vue.js 等前端技术开发3D页面demo;
3、一年以上前端开发工作经验,代码编写规范,编程基础扎实,熟练掌握openGL、osg、ogre开发且有WebGL经验亦可;
4、精通Web前端技术,包括HTML5/CSS/Javascript等,对性能优化、解决多浏览器兼容性问题有经验;对移动设备前端开发有经验;
5、熟悉w3c标准,对表现与数据分离、web语义化等有深刻理解;
6、自动构建工具(gulp或者grunt)的基本运用;
7、熟悉Angular4以上和Node.js,理解前端MVC逻辑,对路由、模块化和依赖注入有一定的掌握;
8、熟悉业界常见的开源组件,有开源项目开发经验者优先。
待遇环境
薪资:11k-28k。实际多少依据个人能力。
弹性工作制,上下班打卡。
园区健身房、食堂等,晚饭补贴,打车补贴等。
【一个好用的css】pointer-events;当前元素可不可以被点击,实现穿透点击,穿透层级高的视图,点击层级低的视图
官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: auto; 与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同
pointer-events: none; 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
下面这个例子是不会触发onTap事件的
<template>
<view>
<view class="a"></view>
<view class="b" @tap="onTap"></view>
</view>
</template>
<script>
export default {
methods: {
onTap() {
console.log("点击了b");
}
}
}
</script>
<style lang="scss" scoped>
.a {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 10;
}
.b {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
下面这个例子会触发onTap事件的,在a的样式加上pointer-events: none;,b的样式加上pointer-events: auto;其他不变
<template>
<view>
<view class="a"></view>
<view class="b" @tap="onTap"></view>
</view>
</template>
<script>
export default {
methods: {
onTap() {
console.log("点击了b");
}
}
}
</script>
<style lang="scss" scoped>
.a {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 10;
pointer-events: none;
}
.b {
width: 100px;
height: 100px;
background-color: aqua;
pointer-events: auto;
}
</style>
↓↓↓ 各位大佬点点赞
官方文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events: auto; 与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同
pointer-events: none; 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
下面这个例子是不会触发onTap事件的
<template>
<view>
<view class="a"></view>
<view class="b" @tap="onTap"></view>
</view>
</template>
<script>
export default {
methods: {
onTap() {
console.log("点击了b");
}
}
}
</script>
<style lang="scss" scoped>
.a {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 10;
}
.b {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
下面这个例子会触发onTap事件的,在a的样式加上pointer-events: none;,b的样式加上pointer-events: auto;其他不变
<template>
<view>
<view class="a"></view>
<view class="b" @tap="onTap"></view>
</view>
</template>
<script>
export default {
methods: {
onTap() {
console.log("点击了b");
}
}
}
</script>
<style lang="scss" scoped>
.a {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
z-index: 10;
pointer-events: none;
}
.b {
width: 100px;
height: 100px;
background-color: aqua;
pointer-events: auto;
}
</style>
↓↓↓ 各位大佬点点赞
收起阅读 »




