（四）可滚动视图区域 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-areastyle="width: 300px; height:300px; background-color: red;"><movable-viewstyle="width: 100px; height:100px; background-color: blue;"direction="all"x="{{x}}"y="{{y}}">text</movable-view></movable-area>

js:

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

实现左滑删除：

<movable-areastyle="width: 100%; height:50px; border: 1px solid #ccc; display: flex"><movable-viewstyle="width: 120%; height:50px;margin-left: 110%"direction="horizontal"x="{{x}}"y="{{y}}"><view style="display: flex"><view style="width: 100%;">message</view><viewstyle="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相关推荐

七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
ASP.NET Core MVC 之区域（Area）
区域(Area)是一个 ASP.NET MVC 功能,用于将相关功能组织为一个单独的命名空间(用于路由)和文件结构(用于视图).使用区域通过向控制器和操作添加一个路由参数(area)来创建用于路由目 ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
RHEL6.3 DNS高级技术二通过DNS主从区域复制实现DNS View负载均衡和冗余备份
RHEL6.3 DNS高级技术二 ----通过DNS主从区域复制实现DNS View负载均衡和冗余备份版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议 ...
ospf避免环路_【HCIERamp;S面试】之OSPF四种特殊区域
上期,我们讲解了OSPF的几种LSA,分别是Router LSA.Network LSA.Network-summary LSA.ASBR-summary LSA.AS-external LSA.NS ...
html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
OSPF协议将其管理的网络划分为不同类型的若干区域（Area），其中标准区域特点是（64）；存根区域（stub）的特点是（65）。【答案】C B
OSPF协议将其管理的网络划分为不同类型的若干区域(Area),其中标准区域特点是(64):存根区域(stub)的特点是(65). (64)A.不接受本地AS之外的路由信息,也不接受其他区域的路由汇总 ...
微信小程序之可滚动视图 scroll-view 的使用注意
微信小程序之可滚动视图 scroll-view 使用注意: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 d ...
php预览ppt,演示文稿幻灯片有哪四种视图模式？
四种视图模式为:1."普通"视图模式,由大纲栏.幻灯片栏和备注栏组成:2."幻灯片浏览"视图模式,以最小化的形式显示演示文稿中的所有幻灯片:3."备注 ...

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

（四）可滚动视图区域 movable-area moveable-view相关推荐

最新文章

热门文章