![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序
小程序开发过程中遇到的各类问题和解决方案总结
本心_
行动派
展开
-
小程序 制作自定义弹层 添加弹层显示和隐藏动画 父组件与子组件(自定义组件)之间传值
0.说明与效果本文打算用一个具体的例子,总结下这些开发过程中学习到的知识:1.制作自定义组件,并在页面中引用2.自定义组件的内容是一个表单弹层,添加弹层在弹出和隐藏时的动画3.展示父组件与子组件(自定义组件)的传参功能看下最终的效果图:1.设置自定义组件,并在页面中引用官网传送门其实步骤很简单1.在跟目录中创建components目录(用于放置自定义组件,在此目录下再创建组件目录,新建组件时记得选择 ‘新建Component’ 即可如果创建成功,打开js...原创 2020-11-17 17:30:02 · 2126 阅读 · 6 评论 -
小程序 通讯录
实例效果:实现功能:1.上下滑动通讯录,右侧导航栏与顶部跟随响应2.点击右侧导航栏,通讯录跳转到响应位置思路:1、通讯录内容用scroll-view包住,利用scroll-view提供的bindscroll方法,此方法在滚动时触发(要给scroll-view添加一个默认高度,这个默认高度一般是手机屏幕默认高度,否则可能无法触发方法,因为scroll-view此时视为没有滚动)。方法触发时,能够通过参数获取屏幕实时高度,创建一个数组存储每一组(A、B、C...)的屏幕高度,通过比较控制原创 2020-10-14 12:06:31 · 1248 阅读 · 2 评论 -
小程序 自定义弹窗
小程序提供了丰富的交互API,如wx.showToast、wx.showModal,但有时并不能满足我们的需求,这篇博文提供了一个实现自定义弹窗的思路。结合一个简单案例,看下最终的效果:我们要做的事情是,点击按钮时,弹窗出现,弹窗以外的区域变成透明,点击此区域,弹窗消失,弹窗中也可设置取消按钮。实现思路:弹窗和背景(灰色区域,铺满整个页面)都占据标签,用if控制该区域是否显示,点击按钮时,两片区域显示,用z-index标签设置堆叠顺序,我将背景的z-index值设为1,弹窗设置为2,这.原创 2020-10-13 16:48:23 · 1714 阅读 · 0 评论 -
小程序 跳转到tabbar页面 报错
我们习惯用wx.navigateTo做跳转链接,但是如果要跳转到tabbar页面,会报以下错误:其实如果仔细查看官方文档,就能发现用官方提供的另一个API,wx.switchTab即可解决问题:原创 2020-10-13 15:07:31 · 558 阅读 · 1 评论 -
小程序 动态更改数组中对象的某个值
小程序支持数据双向绑定,但是在逻辑层(js文件)中改变属性的值时必须要用this.setData({ a:A, b:B})这种格式,问题在于,当需求仅需要更改 某个数组中对象的某个属性值时,这种格式就需要转换一下。如: students: [ { name: '张三', number: '1234' }, { name: '李四', number: '1111' }, ...原创 2020-10-13 14:50:36 · 1761 阅读 · 3 评论 -
小程序 横向滚动导航栏
先上案例最终效果:案例实现功能:1.导航栏横向滚动效果2.当前项目有下划线标识3.点击项目,导航栏滚动到相应位置以下将分步骤逐步完善陈述这些功能,最终会呈现所有代码1.引用组件scroll-view,达到滚动效果万丈高楼平地起,首先要达到横向滚动的效果wxml<view> <scroll-view scroll-x="true" enable-flex="true" class="scroll"> <b...原创 2020-10-13 14:19:25 · 4090 阅读 · 0 评论 -
小程序 动态绑定class
微信小程序提供了比较便捷的语法,使我们能够快速地动态绑定class用法:<view class="{{ 表达式?'A':'B'}}" ></view>在一个标签的class里添加{{}}模板语法,模板里面是一个三元判别式,其中表达式一般引用data中的属性,表达式返回true或者false,A,B是class名,按照三元判别式的逻辑引用A或B。PS:当然可以同时引用多个,如<view class="E F {{表达式?'A':'B' }} {{表达式?'C...原创 2020-10-12 19:24:55 · 19046 阅读 · 4 评论