微信小程序仿微信SlideView组件slide-view

mikyou 发布于2019-08-23 12:30 / 1376人阅读

摘要：使用安装从小程序基础库版本或以上及开发者工具或以上开始，小程序支持使用安装第三方包。节点用于承载滑动时所展示的节点，其宽度应于传入的相同。

微信小程序仿微信SlideView组件。

使用

1、安装 slide-view

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。

npm install --save miniprogram-slide-view

2、在需要使用 slide-view 的页面 page.json 中添加 slide-view 自定义组件配置

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

3、WXML 文件中引用 slide-view

每一个 slide-view 提供两个节点，用于承载组件引用时提供的子节点。left 节点用于承载静止时 slide-view 所展示的节点，此节点的宽高应与传入 slide-view 的宽高相同。right 节点用于承载滑动时所展示的节点，其宽度应于传入 slide-view 的 slideWidth 相同。


  这里是插入到组内容
  
    标为已读
    删除

参数说明：

width：Number类型，默认值显示屏幕的宽度，slide-view组件的宽度

height：Number类型，默认值0，slide-view组件的高度

slide-width：Number类型，默认值0，滑动展示区域的宽度（默认高度与slide-view相同）

运行效果

其他

slide-view项目地址：https://github.com/wechat-min...

【小程序推荐】百科知识词典

GPU云服务器云服务器微信小程序组件微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98618.html

小程序左滑删除如何实现

摘要：微信小程序如何实现左滑删除的功能呢左滑删除组件，基础库开始支持，如下图所示。微信小程序如何实现左滑删除的功能呢 https://developers.weixin.qq.... https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html Slideview左滑删除组件，基础库 2.4.4 ...

ChristmasBoy 2019-08-26 18:42 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
JavaScript结合Bootstrap仿微信后台多图文界面管理

摘要：这篇文章主要为大家详细介绍了结合仿微信后台多图文界面管理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下模仿微信后台管理的多图文界面，集成了异步上传文件的插件，供大家参考，具体内容如下效果图详细代码标题编辑这篇文章主要为大家详细介绍了js结合Bootstrap仿微信后台多图文界面管理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 js模仿微信后台管理的多图文界面，集成了ajax...

wushuiyong 2019-08-23 13:12 评论0 收藏0