@cloudbase/weda-ui-mp 3.27.3 → 3.28.0

package/components/container/index.js

@@ -27,6 +27,7 @@ Component({
   observers: {
     data: function (data) {
       this.setReadonlyAttributes?.({ data });
+      this.setData({ id: this.id });
     },
   },
 });

package/components/form/location/index.js

@@ -441,9 +441,25 @@ Component({
     handleError: function (e) {
       this.triggerEvent('error', e.detail);
     },
+    openLocation: function (e) {
+      wx.openLocation({
+        latitude: e.detail.latitude,
+        longitude: e.detail.longitude,
+        scale: 18
+      });
+    }
   },
   observers: {
     value: function (value) {
+      if (!value) {
+        // 清空地图
+        this.setData({
+          currentLocations: {},
+          location: {},
+          isAddrShow: false
+        });
+        return;
+      }
       const currentLocations = this.data.currentLocations;
       if (value || !currentLocations.latitude) {
         const { geopoint: { coordinates } = {}, address: poiname, detailedAddress } = value || {};

package/components/form/location/index.wxss

@@ -58,7 +58,7 @@
 .form-location-con__text {
   margin-left: 4px;
   cursor: pointer;
-  color: #0052d9;
+  color: var(--wd-color-brand, #0052d9);
 }
 
 .form-location_cell {

package/components/scrollView/index.js

@@ -1,9 +1,11 @@
 import handleEvents from '../../utils/handleEvents';
+import { commonCompBehavior } from '../../utils/common-behavior';
 
 Component({
   options: {
     virtualHost: true,
   },
+  behaviors: [commonCompBehavior],
   properties: {
     id: {
       type: String,
@@ -41,6 +43,7 @@ Component({
     },
     scrollIntoView: {
       type: String,
+      value: '',
     },
     scrollWithAnimation: {
       type: Boolean,
@@ -98,16 +101,102 @@ Component({
       type: Boolean,
       value: false,
     },
+    observerSelector: {
+      type: Array,
+      value: [],
+    },
+    observerThreshold: {
+      type: Number,
+      value: 0,
+    },
+    rootMargin: {
+      type: Object,
+      value: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      },
+    },
   },
+  domObserver: [],
   data: {
     clientHeight: 0,
     clientWidth: 0,
+    currentScrollTop: 0,
+    currentScrollLeft: 0,
+    currentTop: 0,
+    currentLeft: 0,
+    scrollViewContext: null,
+    currentEnhanced: false,
   },
   methods: {
+    init() {
+      const query = wx.createSelectorQuery().in(this);
+      query
+        .select(`#${this.id}`)
+        .node()
+        .exec((res) => {
+          const scrollViewContext = res[0]?.node;
+          this.setData({ scrollViewContext });
+          this.triggerEvent('onReady', { scrollViewContext });
+        });
+    },
+    updateWidgetAPI() {
+      const that = this;
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          scrollViewContext: this.data.scrollViewContext,
+          scrollIntoElement({ selector }) {
+            that.scrollIntoView(selector);
+          },
+        });
+    },
+    observeHandle(selector, callback) {
+      const { rootMargin } = this.data;
+      const _rootMargin = {
+        top: parseInt(rootMargin.top),
+        bottom: parseInt(rootMargin.bottom),
+        left: parseInt(rootMargin.left),
+        right: parseInt(rootMargin.right),
+      };
+      // 自定义组件场景，只能用wx.createIntersectionObserver创建，且不支持配置threshold参数
+      const observe = wx
+        .createIntersectionObserver()
+        .relativeToViewport(_rootMargin)
+        .observe(`.wd-mp-root >>> .${selector}`, (res) => {
+          // 模块曝光
+          if (res.intersectionRatio) {
+            callback(res);
+          } else {
+            console.warn('元素未找到:', selector);
+          }
+        });
+      return observe;
+    },
+    // 监听模块曝光
+    observeModuleExpose() {
+      if (this.domObserver?.length) {
+        this.domObserver.forEach((element) => {
+          element?.disconnect();
+        });
+      }
+      if (this.data.observerSelector?.length) {
+        const domObserver = this.data.observerSelector?.map((i) => {
+          // 小程序暂时只支持class
+          let selector = i.replace('#', '').replace('.', '');
+          return this.observeHandle(selector, (res) => {
+            this.triggerEvent('scrollToTarget', res);
+          });
+        });
+        this.domObserver = domObserver;
+      }
+    },
+
     getComponentClientHeight: function () {
       const that = this;
       const query = wx.createSelectorQuery().in(this);
-      query.select('.g-scroll-view').boundingClientRect();
+      query.select(`#${this.id}`).boundingClientRect();
       query.exec((res) => {
         that.setData({
           clientHeight: res[0]?.height,
@@ -117,28 +206,138 @@ Component({
     },
     scroll: function (event) {
       const { clientHeight, clientWidth } = this.data;
-      const detail = { ...event.detail, clientHeight, clientWidth };
+      const detail = {
+        ...event.detail,
+        clientHeight,
+        clientWidth,
+      };
       this.triggerEvent('scroll', detail);
     },
+    scrollIntoView(elementId) {
+      if (!this.data.currentEnhanced) {
+        this.setData({ currentEnhanced: true });
+      }
+      const queryScroll = wx.createSelectorQuery().in(this);
+      queryScroll
+        .select(`#${this.id}`)
+        .scrollOffset()
+        .select(`#${this.id}`)
+        .boundingClientRect()
+        .exec((res) => {
+          const scrollOffset = res?.[0];
+          const node = res?.[1];
+          if (scrollOffset) {
+            this.setData({
+              currentScrollTop: scrollOffset?.scrollTop ?? 0,
+              currentScrollLeft: scrollOffset?.scrollLeft ?? 0,
+            });
+          }
+          if (node) {
+            this.setData({ currentTop: node?.top ?? 0, currentLeft: node?.left ?? 0 });
+          }
+        });
+
+      const { scrollY, scrollX, scrollViewContext } = this.data;
+      // 自定义组件无法通过id获取到子元素，转换为通过跨自定义组件的后代选择器选取 .the-ancestor >>> .the-descendant
+      let selector = elementId.replace('#', '').replace('.', '');
+      const query = wx.createSelectorQuery();
+      query
+        .select(`.wd-mp-root >>> .wd-comp-id-${selector}`)
+        .boundingClientRect()
+        .select(`.wd-mp-root >>> .${selector}`)
+        .boundingClientRect()
+        .exec((res) => {
+          const node = res[0] || res[1];
+          if (node) {
+            const top = node.top + this.data.currentScrollTop - this.data.currentTop + 1;
+            const left = node.left + this.data.currentScrollLeft - this.data.currentLeft + 1;
+            if (scrollY && scrollViewContext) {
+              scrollViewContext.scrollTo({
+                top: top,
+                animated: true,
+              });
+            }
+            if (scrollX && scrollViewContext) {
+              scrollViewContext.scrollTo({
+                left: left,
+                animated: true,
+              });
+            }
+          } else {
+            console.warn('元素未找到:', selector);
+          }
+        });
+    },
     ...handleEvents([
       //   { name: 'scroll', title: '滚动时触发' },
-      { name: 'scrolltolower', title: '滚动到底部/右边时触发' },
-      { name: 'scrolltoupper', title: '滚动到顶部/左边时触发' },
+      {
+        name: 'scrolltolower',
+        title: '滚动到底部/右边时触发',
+      },
+      {
+        name: 'scrolltoupper',
+        title: '滚动到顶部/左边时触发',
+      },
       {
         name: 'dragstart',
         title: '滑动开始事件(同时开启 enhanced 属性后生效)',
       },
-      { name: 'dragging', title: '滑动事件(同时开启 enhanced 属性后生效)' },
-      { name: 'dragend', title: '滑动结束事件(同时开启 enhanced 属性后生效)' },
-      { name: 'refresherpulling', title: '自定义下拉刷新控件被下拉' },
-      { name: 'refresherrefresh', title: '自定义下拉刷新被触发' },
-      { name: 'refresherrestore', title: '自定义下拉刷新被复位' },
-      { name: 'refresherabort', title: '自定义下拉刷新被中止' },
+      {
+        name: 'dragging',
+        title: '滑动事件(同时开启 enhanced 属性后生效)',
+      },
+      {
+        name: 'dragend',
+        title: '滑动结束事件(同时开启 enhanced 属性后生效)',
+      },
+      {
+        name: 'refresherpulling',
+        title: '自定义下拉刷新控件被下拉',
+      },
+      {
+        name: 'refresherrefresh',
+        title: '自定义下拉刷新被触发',
+      },
+      {
+        name: 'refresherrestore',
+        title: '自定义下拉刷新被复位',
+      },
+      {
+        name: 'refresherabort',
+        title: '自定义下拉刷新被中止',
+      },
     ]),
   },
+  observers: {
+    enhanced: function (enhanced) {
+      this.setData({
+        currentEnhanced: enhanced,
+      });
+    },
+    scrollIntoView: function (scrollIntoView) {
+      this.scrollIntoView(scrollIntoView);
+    },
+    scrollViewContext: function () {
+      this.updateWidgetAPI();
+    },
+  },
   lifetimes: {
+    attached() {
+      this.setData({ id: this.id });
+      this.init();
+      this.updateWidgetAPI();
+    },
     ready() {
       this.getComponentClientHeight();
+
+      this.observeModuleExpose();
+    },
+    detached() {
+      if (this.domObserver?.length) {
+        this.domObserver?.forEach((i) => {
+          i?.disconnect();
+        });
+      }
     },
   },
 });

package/components/scrollView/index.wxml

@@ -18,7 +18,7 @@
   refresher-default-style="{{refresherDefaultStyle}}"
   refresher-background="{{refresherBackground}}"
   refresher-triggered="{{refresherTriggered}}"
-  enhanced="{{enhanced}}"
+  enhanced="{{currentEnhanced}}"
   bounces="{{bounces}}"
   show-scrollbar="{{showScrollbar}}"
   paging-enabled="{{pagingEnabled}}"

package/components/wd-location/index.js

@@ -58,7 +58,7 @@ Component({
   lifetimes: {
     attached: function () {
       this.updateWidgetAPI();
-      this.setData({ id: this.id });
+      this.setData({ id: this.id, _oldLocationValue: this.data.value });
     },
   },
 });

package/components/wd-location/index.wxml

@@ -43,6 +43,7 @@
           disabled="{{disabled || readOnly}}"
           bind:change="handleChange"
           bind:error="handleError"
+          openLocation="{{openLocation}}"
         />
       </wd-input-wrap>
     </wd-input-group>

package/package.json

@@ -3,7 +3,7 @@
   "miniprogram": "./",
   "packageManager": "yarn@3.0.2",
   "dependencies": {},
-  "version": "3.27.3",
+  "version": "3.28.0",
   "main": "./",
   "publishConfig": {
     "access": "public"