（四）可滚动视图区域 movable-area moveable-view

（一）movable-area 是可以移动的范围 moveable-view 是移动的元素

有三种情况：

（1）如果 movable-area 的大小等于 movable-view 的大小 则不能够移动 （100%填充）

（2）如果 movable-area 的大小小于 movable-view 的大小 则能够移动

（3）如果 movable-area 的大小大于 movable-view 的大小 则能够移动

（二）上代码

（1）拖拽移动

movable-area 里面嵌套 movable-view

<movable-area style="width: 300px; height:300px; background-color: red;">
<movable-view style="width: 100px; height:100px; background-color: blue;" direction="all">text</movable-view>
</movable-area>

（2）点击按钮改变位置

<movable-area
style="width: 300px; height:300px; background-color: red;"
>
<movable-view
style="width: 100px; height:100px; background-color: blue;"
direction="all"
x="{{x}}"
y="{{y}}"
>text</movable-view>
</movable-area>

js:

Page({
// 初始位置 0， 0
data: {
x: 0,
y: 0
},
//事件处理函数
changePosition () {
this.setData({
x: 30,
y: 30
})
}
})

实现左滑删除：

<movable-area
style="width: 100%; height:50px; border: 1px solid #ccc; display: flex"
>
<movable-view
style="width: 120%; height:50px;margin-left: 110%"
direction="horizontal"
x="{{x}}"
y="{{y}}"
>
<view style="display: flex">
<view style="width: 100%;">message</view>
<view
style="background-color: red; width: 20%;height:50px;color: white;text-align: center; line-height: 50px"
bindtap="delete"
>删除</view>
</view>
</movable-view>
</movable-area>

图片：

左滑：

（二）使用插件

主要是练习一下如何在小程序中使用插件

（1）初始化

（2）进入项目中安装插件：

npm install --save miniprogram-slide-view

（3）构建npm

（4）构建之后必须，使用 npm ：

安装好之后在package.lock.json 里面

{
"name": "xiaochengxu",
"version": "1.0.0",
"description": "小程序文档： https://developers.weixin.qq.com/miniprogram/dev/framework/",
"main": "app.js",
"dependencies": {
"miniprogram-slide-view": "^0.0.4" // 安装的插件
},
"devDependencies": {},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/123luckybing/xiaochengxu.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/123luckybing/xiaochengxu/issues"
},
"homepage": "https://github.com/123luckybing/xiaochengxu#readme"
}

（2）然后在哪个页面中使用这个插件，在该页面目录下的 json 文件中引入

{
"usingComponents": {
"slide-view": "miniprogram-slide-view"
}
}

重新命了一下名 slide-view

（3）在代码中使用

<slide-view class="slide" width="320" height="100" slideWidth="200">
<view slot="left">这里是插入到组内容</view>
<view slot="right">
<view>标为已读</view>
<view>删除</view>
</view>
</slide-view>

注意：每次安装新的 npm 都必须构建 npm。

流程：

（1）安装npm 包

（2）构建npm

（3）写安装包的相关应用代码

最后

以上就是彩色电话为你收集整理的（四）可滚动视图区域 movable-area moveable-view的全部内容，希望文章能够帮你解决（四）可滚动视图区域 movable-area moveable-view所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。