微信小程序
Chandler#
在逐梦的路上,总会有人的梦想枯萎,提升自我才能涅槃重生
展开
-
小程序实践(七)----checkbox实现多选弹窗
小程序(七)----checkbox实现多选弹窗今天开发过程中需要实现一个多选然后以弹窗的方式实现,然后就有了接下来的这个不算太beautiful的弹窗多选可互斥功能。有需要的复制粘贴即可使用,适合新手哦。效果图:1.布局wxll<view style="background:white;width:100%;height:auto;padding:20px 14px;"> <!-- 复选弹框列表 --> <view class='typeListBox'原创 2021-06-24 15:12:14 · 2489 阅读 · 5 评论 -
小程序实践(六)--- 购物车
小程序实践(六)— 购物车今天分享一下购物车功能实现思路,首先购物车是离不开checkbox,而不同的框架封装了不同的api,今天分享的就是小程序的checkbox是怎么实现购物车的功能的。我们在购物的时候常见的购物车无非也就包含以下几个功能点:1)单选、全选、取消以及结算。2)单个商品购买数量的增加与减少3)删除所选商品,购物车为空时的提示接下来我们就可以围绕着需求一步一步的去实现代码实现页面布局wxll这里我是根据数据的length进行判断,length>0则渲染列表,当然也可以原创 2021-06-18 15:23:49 · 3776 阅读 · 3 评论 -
小程序实践(五)--查看全文
小程序实践(五)—查看全文今天写一个特别简单的小例子,查看全文,根据文字的数量以及行数来控制它的显示隐藏。大神勿喷哦,只是记录自己在学习小程序的过程的点点滴滴,初次接触小程序的可以看一下,以便日后开发中有类似的可以直接拿走用。<span class="more {{colNum >3 ? 'hide' : ''}}" id="wdy" >内容区域</span>// pages/viewMore/viewMore.jsPage({ /** * 页面的初始数原创 2021-06-17 10:43:04 · 474 阅读 · 0 评论 -
小程序实践(二)--swiper轮播图组件
小程序实践(二)–swiper轮播图组件依照惯例,先看效果图:先了解下swiper组件参数配置轮播实现的具体步骤如下:第一步:添加图片素材,我这边是放到images下,文件以及图片名字自定义即可。第二步:在wxml中进行页面布局在这里呢,用到了列表渲染 、 swiper组件,三元运算符(注:由于小程序不能操作dom,三元运算符还有一个常用的使用场景是控件class样式输出,达到j...原创 2019-01-24 10:46:03 · 364 阅读 · 0 评论 -
小程序实践(一)--首页tab选项实现
小程序实践(一)–首页tab选项实现先看下效果图:底部tab切换的实现主要在App.json中的 tabBar列表。如下图所示:接下来详细介绍一下App.json中的参数1.默认情况下主要分为Pages和window两个模块,tabBar是我们在需要的时候添加进去的2.pages–我们开发中所写的页面路径都需要引用在这里3.windows–设置小程序的状态栏、导航条、标题、窗口背景...原创 2019-01-22 10:22:27 · 376 阅读 · 0 评论 -
小程序实践(三)--小程序切换按钮选中状态
小程序实践(三)–动态切换button样式首先说一下为什么要单独写一个这个呢?在小程序中由于不能够直接对DOM元素进行操作,更没有像jquery那样addClass、removeClass这样简便方法对样式进行改变,个人觉得这个相对来说还是比较方便的,就拿出来在这里跟大家分享一下。如果你有更简单的不防写下来跟大家分享一下!还是先看一下最终实现的效果接下来就看一下我们是如何实现的1、布局排...原创 2019-01-28 15:34:05 · 4610 阅读 · 5 评论 -
小程序实践(四)--页面带参传值、JSON数据传递 (1)
小程序实践(四)–页面带参传值、JSON数据传递今天呢写了一个(物流跟踪)列子,将通过这个例子来向大家介绍一下小程序是如何带参跳转、JSON数组的传递与解析。先看下效果图:让我们来看一下本次案例中运用到的函数1)页面跳转的方法:wx.navigateTo({ url: '../logistics/logistics?dataList=' + dataList, })...原创 2019-01-30 10:37:16 · 1802 阅读 · 0 评论