基础库 1.2.0 最先支持,,低版本需做兼容处理
movable-view 的可移动区域
注重:movable-area 必需设置width和height属性,,不设置默以为10px
基础库 1.2.0 最先支持,,低版本需做兼容处理
可移动的视图容器,,在页面中可以拖拽滑动
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction | String | none | movable-view的移动偏向,,属性值有all、vertical、horizontal、none |
| inertia | Boolean | false | movable-view是否带有惯性 |
| out-of-bounds | Boolean | false | 凌驾可移动区域后,,movable-view是否还可以移动 |
| x | Number | 界说x轴偏向的偏移,,若是x的值不在可移动规模内,,会自动移动到可移动规模;;;;改变x的值会触发动画 | |
| y | Number | 界说y轴偏向的偏移,,若是y的值不在可移动规模内,,会自动移动到可移动规模;;;;改变y的值会触发动画 | |
| damping | Number | 20 | 阻尼系数,,用于控制x或y改变时的动画和过界回弹的动画,,值越大移动越快 |
| friction | Number | 2 | 摩擦系数,,用于控制惯性滑动的动画,,值越大摩擦力越大,,滑动越快阻止;;;;必需大于0,,否则会被设置成默认值 |
movable-view 必需设置width和height属性,,不设置默以为10px
movable-view 默以为绝对定位,,top和left属性为0px
当movable-view小于movable-area时,,movable-view的移动规模是在movable-area内;;;;当movable-view大于movable-area时,,movable-view的移动规模必需包括movable-area(x轴偏向和y轴偏向脱离思量)
注重:movable-view必需在<movable-area/>组件中,,并且必需是直接子节点,,否则不可移动。。。。
示例代码:
<view class="section">
<view class="section__title">movable-view区域小于movable-area</view>
<movable-area style="height: 200px;width: 200px;background: red;">
<movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all">
</movable-view>
</movable-area>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
</view>
<view class="section__title">movable-view区域大于movable-area</view>
<movable-area style="height: 100px;width: 100px;background: red;" direction="all">
<movable-view style="height: 200px; width: 200px; background: blue;">
</movable-view>
</movable-area>
</view>
Page({
data: {
x: 0,
y: 0
},
tap: function(e) {
this.setData({
x: 30,
y: 30
});
}
})
更多微信小程序开发教程,,可以关注。。。。
KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。KESION 一直通过手艺立异,,提供产品和服务,,助力企业向数字化转型,,通过科技驱动商业刷新,,让商业变得更智慧!
swiper 滑块视图容器。。。。 属性名 类型 默认值 说明 最低版本 indicator-dots Boolean false 是否显示面板指示点 indicator-color Color rgba(
icon 图标。。。。 属性名 类型 默认值 说明 type String icon的类型,,有用值:success, success_no_circle, info, warn, waiting, canc