1.4.x dev

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.4.11] - 2026-02-03
+- popup ali fix 滚动穿透问题
+
+## [1.4.10] - 2026-02-03
+- popup rn fix 动画时调用 initContentRect，导致动画卡顿
+
+## [1.4.9] - 2026-01-29
+- toast 增加动画配置，可关闭 toast 显、隐动画
+
+## [1.4.8] - 2026-01-20
+- popup rn 增加 zIndex 配置
+
 ## [1.4.7] - 2026-01-13
 - icon、button 组件 css 编译问题修复（React Native）
 
@@ -25,6 +37,9 @@
 ## [1.4.0] - 2025-11-06
 - RN 组件适配鸿蒙
 
+## [1.3.17] - 2026-01-15
+- popup ali fix 滚动穿透问题
+
 ## [1.3.16] - 2025-12-05
 - button 支持阴影（React Native）
 - dialog 对齐小程序、web、RN 关闭按钮样式

docs/config/sidebar.js

@@ -128,6 +128,10 @@ module.exports = [
           {
             title: 'Switch 滑动开关',
             path: '/components/base/switch'
+          },
+          {
+            title: 'Slider 滑动选择器',
+            path: '/components/base/slider'
           }
         ]
       },

docs/guide/changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [1.4.11] - 2026-02-03
+- popup ali fix 滚动穿透问题
+
+## [1.4.10] - 2026-02-03
+- popup rn fix 动画时调用 initContentRect，导致动画卡顿
+
+## [1.4.9] - 2026-01-29
+- toast 增加动画配置，可关闭 toast 显、隐动画
+
+## [1.4.8] - 2026-01-20
+- popup rn 增加 zIndex 配置
+
 ## [1.4.7] - 2026-01-13
 - icon、button 组件 css 编译问题修复（React Native）
 
@@ -25,6 +37,9 @@
 ## [1.4.0] - 2025-11-06
 - RN 组件适配鸿蒙
 
+## [1.3.17] - 2026-01-15
+- popup ali fix 滚动穿透问题
+
 ## [1.3.16] - 2025-12-05
 - button 支持阴影（React Native）
 - dialog 对齐小程序、web、RN 关闭按钮样式

example/app.mpx

@@ -52,7 +52,8 @@
     "./pages/loading/index",
     "./pages/input/index",
     "./pages/action-sheet/index",
-    "./pages/tab-bar/index"
+    "./pages/tab-bar/index",
+    "./pages/slider/index"
   ]
   if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
     pages = [

example/common/config.ts

@@ -63,7 +63,8 @@ export default {
           'date-picker',
           'time-picker',
           'rate',
-          'switch'
+          'switch',
+          'slider'
         ]
       },
       {

example/pages/slider/README.md

@@ -0,0 +1,61 @@
+## Cube-Slider
+
+<card>
+
+## 介绍 <span class="title-tag">已适配RN</span>
+
+滑动选择器（基于touch事件拖动滑块儿，请在移动端环境下体验）。
+
+**注意：RN模式下如果组件使用在[scroll-view](https://www.mpxjs.cn/guide/rn/component.html#scroll-view)中，那么change事件可能因为上下滚动不会触发**
+- scroll-view 组件在滚动过程中，不会触发其自身或子组件的 touchend 事件响应，这是 RN 底层实现导致的问题，手势系统识别当前是 scroll-view 的滚动，就会取消掉 touchend 事件的响应。
+- 安卓上如果触发了 scroll-view 组件默认的下拉刷新，binddragend可能不触发，只会触发 binddragstart
+
+</card>
+
+### 示例
+
+<card>
+
+### 基本用法
+
+<!-- @example: slider-default -->
+
+</card>
+
+<card>
+
+### 设置step
+
+<!-- @example: slider-step -> template no-wrap -->
+
+</card>
+
+<card>
+
+### 显示当前value
+
+<!-- @example: slider-value -> template no-wrap -->
+
+</card>
+
+<card>
+
+### 设置最小值/最大值
+
+<!-- @example: slider-min-max -> template no-wrap -->
+
+</card>
+
+<card>
+
+### 自定义滑块儿
+
+设置
+```vue
+custom-content="{{true}}"
+```
+并添加自定义插槽。
+
+<!-- @example: slider-slot show-style -->
+
+</card>

example/pages/slider/index-ios.mpx

@@ -0,0 +1,58 @@
+
+<template>
+  <cube-slider
+    value="{{ 30 }}"
+    min="{{ 0 }}"
+    max="{{ 100 }}"
+    step="{{ 1 }}"
+    class="slider"
+    backgroundColor="{{ '#cccccc' }}"
+    activeColor="{{ '#FF6430' }}"
+    block-size="{{ 28 }}"
+    disabled="{{false}}"
+    show-value="{{true}}"
+    custom-content="{{true}}"
+    bindchange="handleChange"
+    bindchanging="handleChanging"
+  >
+    <view class="slider-thumb"></view>
+  </cube-slider>
+</template>
+
+<script>
+  import { createPage } from '@mpxjs/core'
+
+  createPage({
+    data: {
+      currentValue: 0
+    },
+    methods: {
+      handleChange(e) {
+        this.currentValue = e.detail.value
+        console.log('change', this.currentValue)
+      },
+      handleChanging(e) {
+        this.currentValue = e.detail.value
+        console.log('changing', this.currentValue)
+      }
+    }
+  })
+</script>
+
+<style lang="stylus">
+.slider-thumb
+  width: 100%
+  height: 100%
+  background-image: url("https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_E57CMf3cLCRJiq2VxPuT")
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: 0 6px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
+    }
+  }
+</script>

example/pages/slider/index.mpx

@@ -0,0 +1,59 @@
+<template>
+  <base-container class="slider-view">
+    <view class="content">
+      <!-- default -->
+      <view class="section">
+        <view>基本用法</view>
+        <slider-default></slider-default>
+      </view>
+      <!-- step -->
+      <view class="section">
+        <view>设置step</view>
+        <slider-step></slider-step>
+      </view>
+      <!-- value -->
+      <view class="section">
+        <view>显示当前value</view>
+        <slider-value></slider-value>
+      </view>
+      <!-- min max -->
+      <view class="section">
+        <view>设置最小值/最大值</view>
+        <slider-min-max></slider-min-max>
+      </view>
+      <!-- slot -->
+      <view class="section">
+        <view>自定义滑块儿</view>
+        <slider-slot></slider-slot>
+      </view>
+    </view>
+  </base-container>
+</template>
+
+<script>
+  import { createPage } from '@mpxjs/core'
+
+  createPage({})
+</script>
+
+<style lang="stylus">
+.slider-view
+  height: 100vh
+  .section
+    margin: 0 -10px
+    margin-bottom: 10px
+    background-color: #f7f8fa
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "slider-default": "./slider-default",
+      "slider-slot": "./slider-slot",
+      "slider-step": "./slider-step",
+      "slider-value": "./slider-value",
+      "slider-min-max": "./slider-min-max"
+    }
+  }
+</script>

example/pages/slider/slider-default.mpx

@@ -0,0 +1,36 @@
+
+<template>
+  <cube-slider
+    bindchange="handleChange"
+    bindchanging="handleChanging"
+  >
+  </cube-slider>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    data: {
+      currentValue: 0
+    },
+    methods: {
+      handleChange(e) {
+        this.currentValue = e.detail.value
+        console.log('change', this.currentValue)
+      },
+      handleChanging(e) {
+        this.currentValue = e.detail.value
+        console.log('changing', this.currentValue)
+      }
+    }
+  })
+</script>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
+    }
+  }
+</script>

example/pages/slider/slider-min-max.mpx

@@ -0,0 +1,41 @@
+
+<template>
+  <cube-slider
+    min="{{ 50 }}"
+    max="{{ 200 }}"
+    show-value="{{true}}"
+    bindchange="handleChange"
+    bindchanging="handleChanging"
+  >
+  </cube-slider>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    data: {
+      currentValue: 0
+    },
+    methods: {
+      handleChange(e) {
+        this.currentValue = e.detail.value
+        console.log('change', this.currentValue)
+      },
+      handleChanging(e) {
+        this.currentValue = e.detail.value
+        console.log('changing', this.currentValue)
+      }
+    }
+  })
+</script>
+
+<style lang="stylus"></style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
+    }
+  }
+</script>

example/pages/slider/slider-slot.mpx

@@ -0,0 +1,49 @@
+
+<template>
+  <cube-slider
+    value="{{ 30 }}"
+    custom-content="{{true}}"
+    bindchange="handleChange"
+    bindchanging="handleChanging"
+  >
+    <view class="slider-thumb"></view>
+  </cube-slider>
+</template>
+
+<script>
+  import { createComponent } from '@mpxjs/core'
+
+  createComponent({
+    data: {
+      currentValue: 0
+    },
+    methods: {
+      handleChange(e) {
+        this.currentValue = e.detail.value
+        console.log('change', this.currentValue)
+      },
+      handleChanging(e) {
+        this.currentValue = e.detail.value
+        console.log('changing', this.currentValue)
+      }
+    }
+  })
+</script>
+
+<style lang="stylus">
+.slider-thumb
+  width: 100%
+  height: 100%
+  background-image: url("https://gift-pypu-cdn.didistatic.com/static/driver_miniprogram/do1_E57CMf3cLCRJiq2VxPuT")
+  background-size: contain
+  background-repeat: no-repeat
+  background-position: 0 6px
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "cube-slider": "@mpxjs/mpx-cube-ui/src/components/slider/index.mpx"
+    }
+  }
+</script>