小程序 movable-view cover-view

最新推荐文章于 2023-07-13 16:51:09 发布

dancebit

最新推荐文章于 2023-07-13 16:51:09 发布

阅读量498

点赞数 1

分类专栏：微信小程序学习笔记文章标签：小程序

本文链接：https://blog.csdn.net/ai5945fei/article/details/121148700

版权

微信小程序学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文介绍了微信小程序中movable-view和cover-view的使用方法。movable-view允许用户在指定区域内进行拖动，支持全方向移动，并可设置惯性效果。cover-view则是一个可以覆盖在原生组件之上的文本视图，常用于视频控制等交互场景。示例代码展示了如何配置页面样式及组件属性，以实现全屏移动视图和视频覆盖功能。

摘要由CSDN通过智能技术生成

movable-view

可移动视图

<view>movable-view操作</view>
<movable-area class="area">
  <movable-view class="view" direction="all">
  </movable-view>
</movable-area>

dircetion 可以拖动的方向

scale 可以双指拖放

inertia 惯性操作

页面高度100%设置

需要先设置page整页样式，注意page前没有小数点

/* movable-view/movable-view.wxss */
page{
  height: 100%
}
.area{
  width: 100%;
  height: 100%;
  background-color: #ACD;
}

.view{
  width: 100rpx;
  height: 100rpx;
  background-color: red;
}