知识点-组件-滑块视图容器 swiper

黄菊华老师 2023-01-13 00:23:16

课时名称	课时知识点
知识点-组件-滑块视图容器 swiper	知识点-组件-滑块视图容器 swiper

...全文

91 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

swiper官方给出的demo,总结了一下，留给有需要的人

微信小程序开发

设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建立相应的四个页面；（2）设计首页的幻灯片轮播效果，需要准备好要轮播的图片，同时借助于swiper滑块视图容器组件完成幻灯片轮播效果；（3）设计首页商品内容，需要准备好商品图片以及商品的内容，例如商品的图片、商品的名称、价格等等信息；（4）首页商品信息动态添加到购物车里，需要借助于wx.setStorageSync这个API将商品数据信息保存到本地；（5）闪送超市纵向导航设计需要借助于swiper滑块视图容器组件，动态切换不同导航菜单对应的内容；（6）购物车订单信息，需要使用wx.getStorageSync这个API从本地获取商品信息；（7）地址列表界面布局设计，需要使用view、image等组件，新增地址按钮固定在底部设计需要使用position:fixed属性；相关知识点 （1）app.json配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置底部标签导航、开启debug开发模式；（2）swiper滑块视图容器组件，可以实现海报轮播效果动态展示以及页签内容切换效果；（3）button按钮组件的使用，可以将form表单数据提交给后台；（4）form表单组件，用来将表单输入的内容提交给后台，比如提交这些组件的数据；（5）picker从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器；（6）wx.setStorageSync(KEY,DATA)，将 data 存储在本地缓存中指定 key 中；（7）wx.getStorageSync(KEY)，从本地缓存中同步获取指定 key 对应的内容；

主要介绍了微信小程序实现图片滚动效果,结合实例形式分析了微信小程序基于swiper组件的图片滚动效果相关实现技巧与操作注意事项,需要的朋友可以参考下

使用swiper实现的可以滑动的选项卡，可以适合手机web的开发

黄菊华的课程社区_NO_4

1

社区成员

414

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章