• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序如何使用微信SlideView组件(附示例)

微信小程序如何使用微信SlideView组件(附示例)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-11-30

匿名通过本文主要向大家介绍了javascript,微信小程序,前端等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本篇文章给大家带来的内容是关于微信小程序如何使用微信SlideView组件(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信小程序仿微信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 提供两个<slot>节点,用于承载组件引用时提供的子节点。left 节点用于承载静止时 slide-view 所展示的节点,此节点的宽高应与传入 slide-view 的宽高相同。right 节点用于承载滑动时所展示的节点,其宽度应于传入 slide-view 的 slideWidth 相同。

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

参数说明:

  • width:Number类型,默认值显示屏幕的宽度,slide-view组件的宽度

  • height:Number类型,默认值0,slide-view组件的高度

  • slide-width:Number类型,默认值0,滑动展示区域的宽度(默认高度与slide-view相同)

运行效果

1629886930-5bcf20bf383de_articlex.gif

其他

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

以上就是微信小程序如何使用微信SlideView组件(附示例)的详细内容,更多请关注微课江湖其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 如何实现小程序动画?小程序动画的实现方法
  • 微信小程序如何使用微信SlideView组件(附示例)
  • 微信小程序多层嵌套渲染列表及数据获取的代码
  • 微信小程序支持 cookie的代码实现
  • 什么是懒加载?小程序中图片懒加载的两种实现方法
  • 微信小程序中选项卡的实现方法
  • 微信小程序Page构造函数以及生命周期函数的内容解析(附代码)
  • 简单的微信小程序日历组件的实现(附完整代码)
  • 微信小游戏中如何实现转发&分享&获取头像&游戏圈四种功能
  • 小程序中如何实现分享功能 (代码示例)

相关文章

  • 2018-11-30json文件定义与用法汇总
  • 2018-11-30微信小程序:地理位置 API,图片信息 API
  • 2018-11-30微信小程序开发教程-App()和Page()函数概述
  • 2018-11-30微信小程序购物商城系统的开发之目录结构的介绍
  • 2018-11-30微信小程序页面间跳转如何监听事件?
  • 2018-11-30微信小程序开发:配置详解
  • 2018-11-30分析小程序开发适合的领域
  • 2018-11-30微信小程序案例详解:页面搭建
  • 2018-11-30微信小程序里在哪里找到配置request合法域名?
  • 2018-11-30微信小程序如何实现发送多条服务消息(代码)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 微信小程序入门常识
    • js倒计时小程序实现代码
    • 详解微信小程序开发实例
    • 小程序之完成底部导航的方法详解
    • 微信小程序游戏2048demo代码
    • 分析小程序开发适合的领域
    • 微信小程序开发之http请求
    • ES6新特性开发微信小程序(9)
    • 支付宝小程序5.4号悄然上线,微信该如何接招?
    • 如何解决微信小程序搭建及解决登录失败的问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有