fe / yoho-miniapp-yohood · Commits

Go to a project

Authored by 肖亚东
Commit 2ef40ee55be6e7cba10a97597019617a338168be 1 parent b79c6f64

地图入口动画以及事件处理

Inline Side-by-side
Showing 15 changed files with 85 additions and 16 deletions
  1 +
  2 +Component({
  3 + /**
  4 + * 组件的属性列表
  5 + */
  6 + properties: {
  7 + bottom: {
  8 + type: Number,
  9 + value: 0
  10 + }
  11 + },
  12 +
  13 + /**
  14 + * 组件的初始数据
  15 + */
  16 + data: {
  17 + appearShow: true,
  18 + },
  19 +
  20 + ready: function() {
  21 + setTimeout(() => {
  22 + this.setData({
  23 + appearShow: false,
  24 + })
  25 + }, 1500);
  26 + },
  27 + /**
  28 + * 组件的方法列表
  29 + */
  30 + methods: {
  31 + jump(event) {
  32 + this.triggerEvent('jumpMap');
  33 + }
  34 + }
  35 +})
  1 +{
  2 + "component": true,
  3 + "usingComponents": {
  4 + }
  5 +}
  1 +
  2 + <image class="map-appear" style="bottom:{{bottom}}rpx;" catchtap="jump" src="{{appearShow ? '../../static/images/appear.gif' : '../../static/images/shake.gif'}}"></image>
  3 +
  1 +
  2 +.map-appear {
  3 + width: 100rpx;
  4 + height: 100rpx;
  5 + position: fixed;
  6 + right: 30rpx;
  7 +}
  8 +.map-shake {
  9 + width: 100rpx;
  10 + height: 100rpx;
  11 + position: fixed;
  12 + right: 30rpx;
  13 +}
@@ -4,12 +4,14 @@ @@ -4,12 +4,14 @@
4 // export const APP_REPORT_HOST = 'https://app.yoho.cn/collect/v3'; 4 // export const APP_REPORT_HOST = 'https://app.yoho.cn/collect/v3';
5 // export const LOG_EVENT_HOST = 'https://analysis.yohobuy.com/yas_mobile'; 5 // export const LOG_EVENT_HOST = 'https://analysis.yohobuy.com/yas_mobile';
6 // export const ACTIVITY_HOST = 'https://action.yoho.cn'; 6 // export const ACTIVITY_HOST = 'https://action.yoho.cn';
  7 +// export const YOHOOD_HOST = 'https://www.yohood.cn';
7 8
8 9
9 // *********测试3环境********* 10 // *********测试3环境*********
10 export const API_HOST = 'http://api-test3.dev.yohocorp.com'; 11 export const API_HOST = 'http://api-test3.dev.yohocorp.com';
11 export const SERVICE_HOST = 'http://api-test3.dev.yohocorp.com'; 12 export const SERVICE_HOST = 'http://api-test3.dev.yohocorp.com';
12 export const ACTIVITY_HOST = 'http://192.168.102.49:6006'; 13 export const ACTIVITY_HOST = 'http://192.168.102.49:6006';
  14 + export const YOHOOD_HOST = 'http://yohood.test.yoho.cn';
13 15
14 16
15 17
@@ -17,6 +17,7 @@ Page({ @@ -17,6 +17,7 @@ Page({
17 17
18 scrollToView: '', 18 scrollToView: '',
19 floatViewTop: 70, 19 floatViewTop: 70,
  20 + alphanetTop: 240,
20 showFloatView: false, 21 showFloatView: false,
21 22
22 brandsList: [], 23 brandsList: [],
@@ -97,7 +98,7 @@ Page({ @@ -97,7 +98,7 @@ Page({
97 98
98 wx.createSelectorQuery().selectAll(query).boundingClientRect(function (res) { 99 wx.createSelectorQuery().selectAll(query).boundingClientRect(function (res) {
99 if(res && !that.data.showFloatView) { 100 if(res && !that.data.showFloatView) {
100 - var floatViewTop = res[0].top / pixelRatio - 12; 101 + var floatViewTop = res[0].top / pixelRatio - that.data.alphanetTop - 18;
101 that.setData({ 102 that.setData({
102 scrollToView: ap, 103 scrollToView: ap,
103 floatViewTop, 104 floatViewTop,
@@ -125,6 +126,12 @@ Page({ @@ -125,6 +126,12 @@ Page({
125 126
126 }, 127 },
127 128
  129 + jumpMap() {
  130 + wx.navigateTo({
  131 + url: `../webview/webview?url=https://activity.yoho.cn/feature/507.html?share_id=2647`,
  132 + })
  133 + },
  134 +
128 }) 135 })
129 136
130 function data_letter_sort(data) { 137 function data_letter_sort(data) {
1 { 1 {
2 "navigationBarTitleText": "参展品牌", 2 "navigationBarTitleText": "参展品牌",
3 "usingComponents": { 3 "usingComponents": {
4 - "brandSearch": "/pages/brands/brandSearch" 4 + "brandSearch": "/pages/brands/brandSearch",
  5 + "map-animation": "/components/map-animation/index"
5 } 6 }
6 } 7 }
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 24
25 </scroll-view> 25 </scroll-view>
26 26
27 - <view class="alphanet-selector" data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove"> 27 + <view class="alphanet-selector" style="top:{{alphanetTop}}rpx;}};" data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove">
28 <view class="float-view" style="top:{{floatViewTop}}rpx;display:{{showFloatView?'':'none'}};"> 28 <view class="float-view" style="top:{{floatViewTop}}rpx;display:{{showFloatView?'':'none'}};">
29 <image class="bubble" src="../../static/images/bubble@3x.png"> 29 <image class="bubble" src="../../static/images/bubble@3x.png">
30 <view class="float-letter">{{scrollToView}}</view> 30 <view class="float-letter">{{scrollToView}}</view>
@@ -34,4 +34,7 @@ @@ -34,4 +34,7 @@
34 {{item.letter}} 34 {{item.letter}}
35 </view> 35 </view>
36 </view> 36 </view>
  37 +
  38 + <map-animation bottom="100" bind:jumpMap="jumpMap"></map-animation>
  39 +
37 </block> 40 </block>
@@ -58,23 +58,15 @@ @@ -58,23 +58,15 @@
58 58
59 .alphanet-selector { 59 .alphanet-selector {
60 position: fixed; 60 position: fixed;
61 - top: 0px;  
62 bottom: 0px; 61 bottom: 0px;
63 - right: 0;  
64 - display: flex;  
65 - flex-direction: column;  
66 - align-items: flex-end;  
67 - justify-content: center;  
68 - z-index: 100;  
69 - box-sizing: border-box;  
70 - margin-right: 14rpx; 62 + right: 13rpx;
  63 + height: 728rpx;
71 } 64 }
72 65
73 .selector-one { 66 .selector-one {
74 display: flex; 67 display: flex;
75 justify-content: center; 68 justify-content: center;
76 align-items: center; 69 align-items: center;
77 - padding: 6rpx 12rpx;  
78 font-weight: normal; 70 font-weight: normal;
79 font-style: normal; 71 font-style: normal;
80 font-stretch: normal; 72 font-stretch: normal;
@@ -82,7 +74,6 @@ @@ -82,7 +74,6 @@
82 font-family: PingFang-SC-Medium; 74 font-family: PingFang-SC-Medium;
83 font-size: 20rpx; 75 font-size: 20rpx;
84 color: #444444; 76 color: #444444;
85 - letter-spacing: 0.79px;  
86 line-height: 28rpx; 77 line-height: 28rpx;
87 } 78 }
88 79
@@ -97,7 +88,7 @@ @@ -97,7 +88,7 @@
97 height: 72rpx; 88 height: 72rpx;
98 text-align: center; 89 text-align: center;
99 position: absolute; 90 position: absolute;
100 - right: 70rpx; 91 + right: 50rpx;
101 } 92 }
102 .bubble { 93 .bubble {
103 position: absolute; 94 position: absolute;
@@ -40,6 +40,12 @@ Page({ @@ -40,6 +40,12 @@ Page({
40 } 40 }
41 }, 41 },
42 42
  43 + jumpMap() {
  44 + wx.navigateTo({
  45 + url: `../webview/webview?url=https://activity.yoho.cn/feature/507.html?share_id=2647`,
  46 + })
  47 + },
  48 +
43 onHide: function() { 49 onHide: function() {
44 //Do some when page hide. 50 //Do some when page hide.
45 51
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 "enablePullDownRefresh": true, 3 "enablePullDownRefresh": true,
4 "usingComponents": { 4 "usingComponents": {
5 "schedule-item": "/components/schedule-item/index", 5 "schedule-item": "/components/schedule-item/index",
6 - "slide-bar": "/components/slide-bar/index" 6 + "slide-bar": "/components/slide-bar/index",
  7 + "map-animation": "/components/map-animation/index"
7 } 8 }
8 } 9 }
@@ -13,4 +13,5 @@ @@ -13,4 +13,5 @@
13 <schedule-item data="{{item}}"></schedule-item> 13 <schedule-item data="{{item}}"></schedule-item>
14 </block> 14 </block>
15 15
  16 + <map-animation bottom="40" bind:jumpMap="jumpMap"></map-animation>
16 </view> 17 </view>
@@ -10,6 +10,7 @@ @@ -10,6 +10,7 @@
10 "minified": true, 10 "minified": true,
11 "newFeature": true, 11 "newFeature": true,
12 "coverView": true, 12 "coverView": true,
  13 + "nodeModules": false,
13 "autoAudits": false, 14 "autoAudits": false,
14 "checkInvalidKey": true, 15 "checkInvalidKey": true,
15 "checkSiteMap": true, 16 "checkSiteMap": true,