- 切换tabbar后scroll-view滚动失效
先滑动点餐页面的scroll-view是可以滑动的当我切换到订单页面再次切换回来后scroll就不可以滚动了,目前只在iPhone11 ios13.7复现过
2020-11-10 - 小程序什么时候解决 svg 支持问题?
去年四月份不是已经开始需求评估了吗?如果不支持的话什么时候可以给出反馈?
2020-05-05 - 关于小程序之后可以对SVG直接支持吗?
[代码]<!DOCTYPE html>[代码][代码]<html lang=[代码][代码]"en"[代码][代码]>[代码][代码]<head>[代码][代码] [代码][代码]<meta charset=[代码][代码]"UTF-8"[代码][代码]>[代码][代码] [代码][代码]<meta name=[代码][代码]"viewport"[代码] [代码]content=[代码][代码]"width=device-width, initial-scale=1.0"[代码][代码]>[代码][代码] [代码][代码]<meta http-equiv=[代码][代码]"X-UA-Compatible"[代码] [代码]content=[代码][代码]"ie=edge"[代码][代码]>[代码][代码] [代码][代码]<title>chart</title>[代码][代码] [代码][代码]<style>[代码][代码] [代码][代码]* {[代码][代码] [代码][代码]padding: 0;[代码][代码] [代码][代码]margin: 0;[代码][代码] [代码][代码]box-sizing: border-box;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]html, body, .view {[代码][代码] [代码][代码]height: 100%;[代码][代码] [代码][代码]}[代码][代码] [代码][代码].view {[代码][代码] [代码][代码]display: flex;[代码][代码] [代码][代码]justify-content: center;[代码][代码] [代码][代码]align-items: center;[代码][代码] [代码][代码]background:[代码] [代码]#000;[代码][代码] [代码][代码]}[代码][代码] [代码][代码].chart {[代码][代码] [代码][代码]width: 250px;[代码][代码] [代码][代码]height: 250px;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]svg {[代码][代码] [代码][代码]display: block;[代码][代码] [代码][代码]width: 100%;[代码][代码] [代码][代码]height: 100%;[代码][代码] [代码][代码]}[代码][代码] [代码][代码].circle {[代码][代码] [代码][代码]stroke-linecap: round;[代码][代码] [代码][代码]transition: all .4s;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]</style>[代码][代码]</head>[代码][代码]<body>[代码][代码] [代码][代码]<div class=[代码][代码]"view"[代码][代码]>[代码][代码] [代码][代码]<div class=[代码][代码]"chart"[代码][代码]>[代码][代码] [代码][代码]<svg version=[代码][代码]"1.1"[代码] [代码]xmlns=[代码][代码]"http://www.w3.org/2000/svg"[代码] [代码]x=[代码][代码]"0"[代码] [代码]y=[代码][代码]"0"[代码] [代码]width=[代码][代码]"100"[代码] [代码]height=[代码][代码]"100"[代码] [代码]viewBox=[代码][代码]"0 0 100 100"[代码][代码]>[代码][代码] [代码][代码]<defs>[代码][代码] [代码][代码]<linearGradient id=[代码][代码]"otog"[代码] [代码]x1=[代码][代码]"0%"[代码] [代码]y1=[代码][代码]"0%"[代码] [代码]x2=[代码][代码]"100%"[代码] [代码]y2=[代码][代码]"0%"[代码][代码]>[代码][代码] [代码][代码]<stop offset=[代码][代码]"0%"[代码] [代码]style=[代码][代码]"stop-color:rgb(235, 107, 3); stop-opacity:1"[代码] [代码]/>[代码][代码] [代码][代码]<stop offset=[代码][代码]"100%"[代码] [代码]style=[代码][代码]"stop-color:rgb(91, 205, 89); stop-opacity:1"[代码] [代码]/>[代码][代码] [代码][代码]</linearGradient>[代码][代码] [代码][代码]</defs>[代码][代码] [代码][代码]<text x=[代码][代码]"26"[代码] [代码]y=[代码][代码]"60"[代码] [代码]fill=[代码][代码]"url(#otog)"[代码] [代码]style=[代码][代码]"font-size: 25px;"[代码][代码]>[代码][代码] [代码][代码]<tspan id=[代码][代码]"text"[代码][代码]></tspan>[代码][代码] [代码][代码]</text>[代码][代码] [代码][代码]</svg>[代码][代码] [代码][代码]</div>[代码][代码] [代码][代码]</div>[代码][代码] [代码][代码]<script>[代码][代码] [代码][代码]var[代码] [代码]wrap = document.querySelector([代码][代码]'svg'[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]text = document.getElementById([代码][代码]'text'[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]pi = Math.PI;[代码][代码] [代码][代码]var[代码] [代码]r = 40;[代码][代码] [代码][代码]var[代码] [代码]d = 2 * r * pi;[代码][代码] [代码][代码]var[代码] [代码]part = d / 8;[代码][代码] [代码][代码]var[代码] [代码]sum = part * 5;[代码] [代码] [代码][代码]function[代码] [代码]dashArray(val) {[代码][代码] [代码][代码]if[代码][代码](val > 100 || val < 0) [代码][代码]return[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]cut = state => (state - val) * part / 20[代码][代码] [代码][代码]if[代码][代码](val > 80) {[代码][代码] [代码][代码]return[代码] [代码]`${part} 5 ${part} 5 ${part} 5 ${part} 5 ${part - cut(100)} ${ d * 3 / 8 - 20 + cut(100) }`[代码][代码] [代码][代码]}[代码][代码] [代码][代码]if[代码][代码](val > 60) {[代码][代码] [代码][代码]return[代码] [代码]`${part} 5 ${part} 5 ${part} 5 ${part - cut(80)} ${ d / 2 - 15 + cut(80) }`[代码][代码] [代码][代码]}[代码][代码] [代码][代码]if[代码][代码](val > 40) {[代码][代码] [代码][代码]return[代码] [代码]`${part} 5 ${part} 5 ${part - cut(60)} ${ d * 5 / 8 - 10 + cut(60) }`[代码][代码] [代码][代码]}[代码][代码] [代码][代码]if[代码][代码](val > 20) {[代码][代码] [代码][代码]return[代码] [代码]`${part} 5 ${part - cut(40)} ${ d * 5 / 3 - 5 + cut(40) }`[代码][代码] [代码][代码]}[代码][代码] [代码][代码]return[代码] [代码]`${part - cut(20)} ${ d * 7 / 8 + cut(20) }`[代码][代码] [代码][代码]}[代码][代码] [代码] [代码] [代码][代码]function[代码] [代码]createRing(x, y, r, color) {[代码][代码] [代码][代码]var[代码] [代码]circle = document.createElementNS([代码][代码]'http://www.w3.org/2000/svg'[代码][代码], [代码][代码]'circle'[代码][代码]);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'class'[代码][代码], [代码][代码]'circle'[代码][代码]);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'cx'[代码][代码], x);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'cy'[代码][代码], y);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'r'[代码][代码], r);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'fill'[代码][代码], [代码][代码]'none'[代码][代码]);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'stroke'[代码][代码], color);[代码][代码] [代码][代码]circle.setAttribute([代码][代码]'stroke-width'[代码][代码], 3);[代码][代码] [代码][代码]circle.style.strokeDashoffset = - d * 3 / 8 - 5.8;[代码][代码] [代码][代码]wrap.appendChild(circle);[代码][代码] [代码][代码]return[代码] [代码]circle;[代码][代码] [代码][代码]}[代码] [代码] [代码][代码]var[代码] [代码]backRing = createRing(50, 50, 40, [代码][代码]'#777'[代码][代码]);[代码][代码] [代码][代码]backRing.style.strokeDasharray = dashArray(100);[代码][代码] [代码][代码]var[代码] [代码]frontRing = createRing(50, 50, 40, [代码][代码]'url(#otog)'[代码][代码]);[代码][代码] [代码][代码]function[代码] [代码]setPercent(val) {[代码][代码] [代码][代码]frontRing.style.strokeDasharray = dashArray(val);[代码][代码] [代码][代码]text.innerHTML = val + [代码][代码]'%'[代码][代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]setInterval(() => {[代码][代码] [代码][代码]setPercent(Math.round(100 * Math.random()));[代码][代码] [代码][代码]}, 1000);[代码][代码] [代码][代码]</script>[代码][代码]</body>[代码][代码]</html>[代码]用svg实现了一个动画效果 但是用小程序不支持,看了官方文档,用到了很多别的技术,之后有没有对应的API呢 和canvas一样
2019-09-04