我做的小程序是模仿手机app版的阿姨帮软件,主要实现的功能有:
首先先要解释我的数据来源,我使用的是用mock来模拟数据,详情看https://www.easy-mock.com Easy Mock是一个可视化工具,能快速生成模拟数据的服务,它能为我们提供一个数据接口url,这要我们就能够使用request发送数据请求了。其次要解释的是用户登录问题,我选择的使用微信账号登录,使用小程序自带的wx.getUseInfo()应用接口来获取用户的信息,当然它首先会调用wx.login接口,询问用户是否给予权限。先就交代这两点,让我们正式进入主题: 功能实现
轮播图 & 底栏交互 & 页面跳转 Image text 这个界面用到了微信小程序自带的轮播图(swiper)组件以及底栏(tabbar)组件,能够快速的实现我们想要的图片轮播和底栏切换的效果,而这些用原生js或者jquery来coding都是很麻烦的. 让我们来看看微信小程序是如何实现的吧: HTML结构
以上就是实现图片轮播效果的代码,使用滑块视图容器swiper组件,它拥有vertical(是否垂直放置图片)、autoplay(是否自动切换)、interval(自动切换时间间隔)、duration(滑动动画时长)、durationindicator-dot(是否显示面板指示点)等属性,再在js里对这些属性做相关的设置。此外,在组件上还用到了列表渲染wx:for,将图片的src属性绑定在一个数组上,使用数组中各项的数据重复渲染swiper组件 看看底栏切换交互的效果吧! Image text 先暂且不管我制作的gif图有多渣,主要想体现的就是个各底部栏之间能进行切换,这个功能实现较简单,主要在tabBar里设置样式、页面路径、图片路径,用列表list来渲染,详细请参考以下代码
|
微信小程序仿阿姨帮
发布:2018-04-18 11:42浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08