• 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
  • 微信公众号
您的位置:首页 > 程序设计 >微信小程序 > 微信小程序开发(五)名片盒「我」的页面详解

微信小程序开发(五)名片盒「我」的页面详解

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

匿名通过本文主要向大家介绍了微信小程序,名片盒,页面详解等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
用户有多张名片,需要左右切换查看,往下切换是菜单按钮。 这里需求两处滑动,用到了微信提供给我们的滑动组件 swiper,并且进行了嵌套使用,第一层是名片展示与菜单按钮的上下滑动, 第二层是名片展示的左右滑动(支持互相嵌套使用的,可以放心使用)。


Vertical 加上就是纵向滑动,去掉即是左右滑动。整体结构如下所示:


点击事件绑定的是数据切换方式,因为需要支持多次点击切换。


初始化数据是 nextSlide:


再看下 nextSlide 事件。currentSlide 是当前页面的 index,改变它即可完成切换效果,可以看上图初始化数据时设置了 cs 是 0。


因而赋值当前 data.cs+1 即可,再把绑定点击事件 clickNext 切换成 nextSlideAgain。


再看下 nextSlideAgain 事件,执行的减去 1 个索引,实现多次点击切换效果。


具体效果可以看到。 点击个人名片进去编辑名片页面,由于需要带参,故而使用的是 wx.navgateTo。


可以看下效果:





最后上点干货:
我们发出第一篇教程的时候有人就注意到这点了,怎么做真实数据交互,下面大家可以了解下。
首先进去是 MD5 加密,requster 交互层。


怎么引用 MD5.js?当然是模块化 require,被引用的 js 不要忘记 module.exports 出来。
下面是 requester.js 引用 MD5.js。
ApplicationRoot 是服务器地址(配置服务器时在开发设置页面查看 AppID 和 AppSecret,配置服务器域名)。


Require.js 这里 module.exports 是暴露方法出去。。


这时候在全局 app.js 里面引入 require.js 映射到全局 global,这个 global 是全局的。


这时候那个页面需要那个页面就直接去接受吧,模块化是不是很好用?


可以完整的看下与后台做数据交互的一个请求实现方式如下:
图一是 requester.js 里面的封装。
图二是需要调用数据的页面渲染。



大家有什么疑问可以多指点,会在下一章说明一些已知疑问。
应该有一些人喜欢 sublime 编辑器,有人问怎么切换高亮,在你的右下角直接切换成 html 即可。


【相关推荐】

1. 微信小程序完整源码下载

2. 微信小程序demo:卡卡汽车

3. 简单的左滑操作和瀑布流布局

以上就是微信小程序开发(五)名片盒「我」的页面详解的详细内容,更多请关注微课江湖其它相关文章!

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

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

  • 微信小程序跟读 demo代码
  • 微信小程序-GetWeApp聊天室 代码
  • 微信小程序demo 仿手机淘宝
  • 微信小程序 Artand 瀑布流风格 代码demo
  • 微信小程序高仿手机QQ应用程序
  • 微信小程序-小商城前台
  • 微信小程序仿手机淘宝demo代码
  • 微信小程序仿Apple Music demo代码
  • 微信小程序整合一套UI库
  • 微信小程序妹子图片展示demo代码

相关文章

  • 2018-11-30推荐10篇wxapp内容组件详解
  • 2018-11-30jQuery实现鼠标绑定事件图片放大功能
  • 2018-11-30微信小程序 (十七)input 组件详细介绍
  • 2018-11-30微信小程序 页面跳转传参的介绍
  • 2018-11-30如何解决微信小程序请求服务器手机预览请求不到数据的问题
  • 2018-11-30微信小程序开发的一些经验
  • 2018-11-3010款按钮特效文章汇总
  • 2018-11-30微信小程序实现点击按钮修改字体颜色功能
  • 2018-11-30怎么在微信小程序里做出全局搜索代码高亮提醒
  • 2018-11-30微信小程序中input标签的使用方法(附代码)

文章分类

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

最近更新的内容

    • 介绍三种小程序事件
    • 小程序开发之天气预报
    • 使用progress组件实现微信小程序显示进度功能
    • ES6新特性开发微信小程序(4)
    • 实例详解​微信小程序图表插件wx-charts参数
    • 关于手势解锁的详细介绍
    • 关于http请求封装的用法总结
    • PHP开发小程序之刮刮卡功能的代码实例
    • 微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码)
    • 微信小程序列表下拉刷新及上拉加载的实现方法分析

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

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