first commit

衣莎项目/源码/YiShaXiYi/component/skeleton/.pydio

@@ -0,0 +1 @@
+c82a22ae-e8a0-40ae-a271-88481086efcf

衣莎项目/源码/YiShaXiYi/component/skeleton/skeleton.js

@@ -0,0 +1,78 @@
+Component({
+	properties: {
+		bgcolor: {
+			type: String,
+			value: '#FFF'
+		},
+		selector: {
+			type: String,
+			value: 'skeleton'
+		},
+		loading: {
+			type: String,
+			value: 'spin'
+		}
+	},
+	data: {
+		loadingAni: ['spin', 'chiaroscuro'],
+		systemInfo: {},
+		skeletonRectLists: [],
+		skeletonCircleLists: []
+	},
+	attached: function () {
+		//默认的首屏宽高，防止内容闪现
+		const systemInfo = wx.getSystemInfoSync();
+		this.setData({
+			systemInfo: {
+				width: systemInfo.windowWidth,
+				height: systemInfo.windowHeight
+			},
+			loading: this.data.loadingAni.includes(this.data.loading) ? this.data.loading : 'spin'
+		})
+
+
+
+	},
+	ready: function () {
+		const that = this;
+
+		//绘制背景
+		wx.createSelectorQuery().selectAll(`.${this.data.selector}`).boundingClientRect().exec(function(res){
+			that.setData({
+				'systemInfo.height': res[0][0].height + res[0][0].top
+			})
+		});
+
+		//绘制矩形
+		this.rectHandle();
+
+		//绘制圆形
+		this.radiusHandle();
+
+	},
+	methods: {
+		rectHandle: function () {
+			const that = this;
+
+			//绘制不带样式的节点
+			wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-rect`).boundingClientRect().exec(function(res){
+				that.setData({
+					skeletonRectLists: res[0]
+				})
+			});
+
+		},
+		radiusHandle: function () {
+			const that = this;
+
+			wx.createSelectorQuery().selectAll(`.${this.data.selector} >>> .${this.data.selector}-radius`).boundingClientRect().exec(function(res){
+				// console.log(res);
+				that.setData({
+					skeletonCircleLists: res[0]
+				})
+			});
+		},
+
+	}
+
+})

衣莎项目/源码/YiShaXiYi/component/skeleton/skeleton.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

衣莎项目/源码/YiShaXiYi/component/skeleton/skeleton.wxml

@@ -0,0 +1,17 @@
+<!--<canvas canvas-id="skeleton" disable-scroll="true"></canvas>-->
+<view style="width: {{systemInfo.width}}px; height: {{systemInfo.height}}px; background-color: {{bgcolor}}; position: absolute; left:0; top:0; z-index:9998; overflow: hidden;">
+
+    <view wx:for="{{skeletonRectLists}}" wx:key="{{index}}" class="{{loading == 'chiaroscuro' ? 'chiaroscuro' : ''}}" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(238,238,238); position: absolute; left: {{item.left}}px; top: {{item.top}}px">
+
+    </view>
+    <view wx:for="{{skeletonCircleLists}}" wx:key="{{index}}" class="{{loading == 'chiaroscuro' ? 'chiaroscuro' : ''}}" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(238,238,238); border-radius: {{item.width}}px; position: absolute; left: {{item.left}}px; top: {{item.top}}px">
+
+    </view>
+
+    <view class="spinbox" wx:if="{{loading == 'spin'}}">
+        <view class="spin"></view>
+
+    </view>
+
+
+</view>

衣莎项目/源码/YiShaXiYi/component/skeleton/skeleton.wxss

@@ -0,0 +1,78 @@
+.spinbox{
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  z-index: 9999
+}
+.spin {
+  display: inline-block;
+  width: 64rpx;
+  height: 64rpx;
+}
+.spin:after {
+  content: " ";
+  display: block;
+  width: 46rpx;
+  height: 46rpx;
+  margin: 1rpx;
+  border-radius: 50%;
+  border: 5rpx solid #409eff;
+  border-color: #409eff transparent #409eff transparent;
+  animation: spin 1.2s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.chiaroscuro{
+  width: 100%;
+  height: 100%;
+  background: rgb(194, 207, 214);
+  animation-duration: 2s;
+  animation-name: blink;
+  animation-iteration-count: infinite;
+}
+
+@keyframes blink {
+  0% {
+    opacity: .4;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .4;
+  }
+}
+
+@keyframes flush {
+  0% {
+    left: -100%;
+  }
+  50% {
+    left: 0;
+  }
+  100% {
+    left: 100%;
+  }
+}
+.shine {
+  animation: flush 2s linear infinite;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background: linear-gradient(to left,
+  rgba(255, 255, 255, 0) 0%,
+  rgba(255, 255, 255, .85) 50%,
+  rgba(255, 255, 255, 0) 100%
+  )
+}