wepy触摸内容滑动效果

最新推荐文章于 2022-07-16 21:28:22 发布
最新推荐文章于 2022-07-16 21:28:22 发布
阅读量295 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44763569/article/details/88684628
版权

文档

1:微信小程序触摸内容滑动解决方案，适用于wepy框架
用命令安装

npm install wepy-com-swiper --save
或者
cnpm install wepy-com-swiper --save

2:在WebStorm里面打开初始化生成的项目
编写index.wpy界面的代码
以下代码来自插件 （复制过来即可使用）
https://github.com/dlhandsome/wepy-com-swiper

 

3：运行编译
wepy build --watch

4：打开微信开发者工具查看效果

 

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

前端王小婷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WP8.1学习系列(第十二章)——全景控件Panorama开发指南
Bvin的专栏
06-27 1204
2014/6/18   适用于：Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows Phone 外观的一部分。与旨在适合手机屏幕边界的标准应用不同，全景应用通过使用超出屏幕边界的长水平画布提供了一个查看控件、数据和服务的独特方式。这些固有的动态视图使用分层动画和内容，
weixin-wepy-swipe-delete-微信小程序-wepy-侧滑删除组件-支持之定义内容区域.zip
09-23
微信小程序-wepy-侧滑删除组件，支持自定义内容区在最近的微信小程序开发过程中需要用到侧滑删除的功能，微信小程序官方是没有提供这样的组件，再加上我们的微信小程序使用的是wepy组件开发框架开发的，wepy也没有提供这样的组件，之前也在github上搜索这方面的组件，没有发现合适的，当时只发现了一个开源的:https://github.com/GeoffZhu/wepy-swipe-delete 只不过该组件功能单一已经被作者废弃了，无奈自己动手撸了一个侧滑删除组件，现在把它开源出来吧。Requirementswepy: "^1.7.3"支持功能和特点自定义内容区域：支持之定义内容区域，组件内使用 slot占位。自定义滚动高度：可以自定义scroll-view的高度，默认为屏幕的高度。自定义menu ：如果默认的menu样式不喜欢可以自定义，也可以显示或者隐藏指定的menu。左右滑动：支持左右滑动也可以设置只左右或者右滑。效果如下：       如何使用目前支持两种使用模式：1.page页面模式优点：可定制化高，扩展性强。 缺点：集成复杂，代码复用性差。2.component 组件模式优点：集成简单，代码复用性强，减少包的大小。 缺点：可定制到低。不建议使用page页面模式，下面详细介绍component 组件模式的使用如何使用// 导入组件import SwipeDeleteView from '@/components/wepy-swipe-delete-view'// 声明组件  components = {       swipeDelete: SwipeDeleteView     }       // 引用组件   <template>   <swipeDelete :list.sync="list">       <view class="item">{{item.userName}}</view>     </swipeDelete>   </template>配置如下：<swipeDelete   :list.sync="list"                :scrollHeight="scrollHeight"                @deleteTap.user="deleteTap"                @deleteLongTap.user="deleteLongTap"                @editTap.user="editTap"                @editLongTap.user="editLongTap"                @addTap.user="addTap"                @addLongTap.user="addLongTap"                @markTap.user="markTap"                @markLongTap.user="markLongTap">属性属性说明备注list要显示的列表的原始数据，最好是加上.sync这样可以异步传值必传scrollHeight设置scroll-view的高度，默认为屏幕高度选传deleteTap.user删除menu单击事件回调必要时传deleteLongTap.user删除menu长按事件回调必要时传editTap.user编辑menu单击事件回调必要时传editLongTap.user编辑menu长按事件回调必要时传addTap.user添加menu单击事件回调必要时传addLongTap.user添加menu长按事件回调必要时传markTap.user标记menu单击事件回调必要时传markLongTap.user标记menu长按事件回调必要时传每个点击事件或者长按事件都会返回两个参数methods = {       deleteTap(view, item) {         console.log(item)         view.deleteItem()       },       deleteLongTap(view, item) {         console.log(item)         wx.showModal({           title: '提示',           content: '确定要删除吗？',           success: function (res) {             if (res.confirm) {               view.deleteItem()             } else {               view.closeItem()             }           }         })       }    }view ：view 是SwipeDeleteView对象的本身，可以通过view来做一些其他操作，如:删除当前的itemitem : item 就是当前操作的原始数据，可以通过item获取真正需要的数据当前SwipeDeleteView对外暴露的函数有：函数名称函数说明参数deleteItem删除当前操作的item(原始数据 view)都会被删除不需要参数closeItem关闭当前操作的item，原始数据不变不需要参数网络异步加载更新如果使用的网络异步加载完成以后，还需要更新下组件，不然会出现无法侧滑的情况。导致原因：原始数据更新以后组件内部无法监听到，这样就不能获取到左右menu的宽度，所以不能侧滑解决办法：this.$invoke('swipeDelete', 'update'); swipeDelete必须和 components = {swipeDelete: SwipeDeleteView} 同名。代码如下：// 模拟网络加载延迟2秒钟    let that = this      setTimeout(function () {        for (let i = 0; i < 20; i ) {          let msg = {}          msg.userName = ''   '用户'   (i   1)          msg.msgText = '您有新的消息'          msg.color = that.buildRandomColor()          msg.height = that.buildRandomHeight()          msg.headerImg = options.avatarUrl          that.list.push(msg)        }        wx.hideLoading()        // 更新组件        that.$invoke('swipeDelete', 'update')        that.$apply()      }, 2000)
微信小程序swiper(实现轮播图效果)
12-14
微信小程序swiper，滑块视图容器，使用这个视图实现轮播图的效果。
wepy框架-触摸内容滑动组件使用步骤
祈澈菇凉
03-03 407
文档 wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 微信小程序wepy框架资源汇总 1:微信小程序触摸内容滑动解决方案，适用于wepy框架 用命令安装 npm install wepy-com-swiper --save 或者 cnpm install wepy-com-swiper --save 2:...
wepy框架-触摸内容滑动
前端视听
05-27 383
文档 wepy快速指南 小程序框架wepy开发文档 wepy开源 wepy官方文档 微信小程序wepy框架资源汇总 1:微信小程序触摸内容滑动解决方案，适用于wepy框架 用命令安装 npm install wepy-com-swiper --save 或者 cnpm install wepy-com-swiper --save 2:在WebStorm里面打开初始化生成的项目 编写ind...
wepy微信小程序使用swiper制作滑动选项卡tab效果（标题带滑动特效）
邓占勇的博客
07-15 1315
最近在做小程序时想做一个APP的那种滑动tab效果，滑动内容可以使用小程序原生的swiper实现，标题滑动效果使用动态样式实现，直接上图。 先看wxml部分的代码 <!--Tab布局--> <view class='title'> <view class='titleSel' bindtap='titleClick' data-i...
wepy框架滑动组件使用
程序员哆啦A梦，蓝胖子
05-14 755
https://github.com/dlhandsome/wepy-com-swiper
微信小程序框架wepy - 滑动删除插件.zip
最新发布
01-09
接着，利用CSS动画或JavaScript动态修改列表项的位移，模拟滑动效果。最后，当滑动达到一定阈值时，显示删除确认提示，用户确认后执行删除逻辑。 在压缩包文件"open_...
精通 Omi 框架等四个电子书
07-06
然后是**imobilebbs Slick**，它是一种流行的触摸优化的jQuery滑块插件，主要用于创建高质量的轮播图和滑动效果。Slick不仅提供了丰富的定制选项，还能在各种设备上运行良好，包括手机和平板电脑。通过imobilebbs ...
分类侧边栏样式图书选择阅读微信程序源码.zip
10-05
4. **用户交互设计**：为了提供良好的用户体验，源码中会包含各种交互设计，如触摸滑动效果、点击反馈、加载动画等。这部分涉及到CSS动画和微信小程序的生命周期管理。 5. **页面路由与导航**：在小程序中，页面间...
微信小程序-知乎全功能源码
06-12
例如，点击按钮触发加载更多数据，滑动列表自动加载新内容等。 7. **样式设计**：微信小程序使用WXML和WXSS进行视图层的构建，其中WXSS类似于CSS，但有一些特定的规则和扩展，如尺寸单位rpx可以根据屏幕宽度动态...
左右滑动swiper
sinat_38992528的博客
01-29 874
转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml   红色   绿色   黄色             红色内容               绿色内容               黑色内容       .wxs
小程序更多的手势事件（左右滑动、放大缩小、双击、长按）
weixin_53068161的博客
07-16 6476
微信小程序提供的原生事件有触摸开始（bindtouchstart）、移动触摸点（bindtouchmove）、触摸结束（bindtouchend）以及长按事件（bindlongtap）和单击事件（bindtap）。通过以上原生事件可设计制作衍生出更多的手势事件；文章记录小程序中组件“左右滑动、放大缩小、双击”事件的配置；...
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换
zhaoguanghe的博客
02-28 2397
顶部滚动选项卡 话不多说，直接上代码 <!--pages/home/home.wxml--> <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class="...
小程序wepy踩坑之旅（五）----- 购物车的实现
Young的博客
06-05 2046
首先大家可以看下演示效果 我先把封装的几个组件代码放到前面。 1.购物车数量加减cart-count.wpy组件 &lt;template&gt; &lt;view class="cart-count"&gt; &lt;view class="decrease" @tap.stop="decrease"&gt;-&lt;/view&gt;
小程序wepy踩坑之旅（三）----- 微信小程序wepy左滑删除特效源码
Young的博客
05-30 1595
我写在了shop_cart.wepy里，源码就在下面注释很详细，直接拷贝到新建的.wpy就可以使用 &lt;template&gt; &lt;view class="item-box"&gt; &lt;view class="items"&gt; &lt;repeat for="{{list}}" key="item"&gt;
在wepy框架中使用echarts（图表）
贤和知识点收藏
01-08 2407
看了网上不少文章，发现还真不好搞，看半天一脸懵逼...如下比较好的文章推荐下 https://blog.csdn.net/juzipidemimi/article/details/81807110 https://github.com/ecomfe/echarts-for-weixin/issues/7 https://blog.csdn.net/yaoxiewan6617/article/...
wepy轮播图
benben0729的专栏
02-15 1090
示例理解 &lt;template&gt; &lt;view&gt; &lt;swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"&gt; &lt;repeat for=&quot
微信小程序开发：wepy踩坑与富文本编辑器解决方案
接着，在模板中引入quill-editor组件，并设置相应的选项和事件监听器，以便在编辑器中处理焦点、内容变化等事件。 为了实现在小程序中上传图片并将其与富文本结合，文章提到了使用`el-upload`组件（来自Element UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值