weixin_45172119的博客

原生小程序封装瀑布流组件最近在公司产品突然说要把首页改成瀑布流的形式，特地研究了一下瀑布流的实现方式，有一个致命的坑需要注意，就是原生的小程序不支持作用域插槽，最后通过研究了一个开源组件，发现的实现方式很有意思，通过抽象节点实现。步骤一：创建两个组件， water-fall 和water-fall-item (具体代码放在文末)步骤二： （抽象节点不知道怎么用，可以看官方文档：抽象节点）water-fall组件中的water-fall.json，需要加配置步骤三：index页面进行引用

最近在看微信小程序canvas的功能，突然发现save和restore的用法，官方文档介绍的比较少，自己做了一个demo进行测试实现：index.wxml文件<!--index.wxml--><view class="container"> <canvas canvas-id="mycanvas" style="height:1000px;width:375px"></canvas></view>index.js文件P

刚接触小程序不久，在公司琢磨了好久，发现了几个小程序的坑。1.界面中明明设置了overflow:hidden和高度：100%，结果在真机测试的时候，界面就是出现滚动条的情况。这种情况需要在加一个page样式：page{ overflow: hidden; height: 100%;}这样就能解决问题了。2.使用scroll-view组件的时候，总是显示不齐所有的内容，这是由于对于scroll组件，我们都是设置了固定的高度，和overflow:hidden的样式，如果要显示齐所有的内容，

微信小程序实现自定导航栏我们在开发小程序的时候，有时候会遇到需要自定义导航栏的需求，这样我们就要开始全局属性的自定义属性我们需要在全局app.json开启自定义开启全局之后，界面只保留状态栏和胶囊，同时原来的界面会发生影响，直接置顶了。所以我们需要自定义一个nav组件（名字随机取）,接着对nav组件进行界面布局， 我这边是我个人的业务代码，可以根据自己的业务需求进行布局，nav.wxml<view style="height:{{navHeight}}px;background

微信小程序长列表优化方案原文链接：https://www.cnblogs.com/plBlog/p/12053973.html案例代码片段：https://gitee.com/huang_ting/group-list-optimization我们的功能里面有个滚动到底部加载的功能，优化前我们的做法是这样的：复制代码<!--只阐述逻辑，非真实代码-->// 1: 初始一个list，存储列表数据data = startList// 2: 监听滚动事件，滚动到底部获取新数据，并追

背景：在开发小程序的时候，微信小程序给出的原生tabbar很难满足公司产品的需求，很多时候我们还是要自定义tabbar的，目前为止，自定义tabbar在第一次切换还是会闪一下，之后就不会，官方也没有给出解决方案。（这是由于点击tabbar的时候，初次会加载页面，这个问题没办法解决。）1.可以解决初次点击出现闪屏的方案，将tabbar作为pages,显示的内容作为组件显示，这样就不会出现闪屏的问题。<!-- 组件显示 --><view hidden="{{currentTab == 0

原生微信小程序中页面生命周期与组件生命周期的触发时间顺序1.用微信开发者工具新建一个项目2.新增两个组件，作为测试用3.页面只有log,index作为测试4.现在index页面进行测试将组件挂载到界面中，在页面index.json，进行生命 "usingComponents": { "demo01":"/components/demo01" }开始测试页面生命周期 onLoad(){ console.log(111) }, onShow(){

基于uniapp开发框架，uview组件库开发的小程序聊天室功能效果；目前已经实现消息自动滚动到底部，已经弹出键盘和更多功能时页面无需自动往上推动，类似微信的效果以下是代码实现：代码仓库：https://gitee.com/huang_ting/chat-components.git由于代码过长，只截取部分，需要的去仓库下载；1.布局分析（1）内容容器中使用scroll-view组件，使用scroll-into-view来绑定内容id,实现自动滚动到底部，（2）子容器chat-info使用

最近开始从头开始做微信小程序的登录功能，项目使用的是uniapp功能。1.使用uni.login Api，会返回一个code用于后端获取openid以及其他信息doLogin() { uni.login({ success(res) { uni.request({ url: "url", //请求地址 method: "POST", data: { code: res.code }, su

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现：1.scroll-view 中的需要滑动的元素不可以用 float 浮动；2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；4.包裹 scroll-vie

在项目实际开发过程中，对于小程序项目，有时候需要获取节点的高度，但由于有异步的问题，导致获取不到目标节点的高度，通过async await配套使用可以解决这个问题。实例：要求动态获取输入框的高度，注意一定要返回promise对象，否则会报undefind的错误。 get_inputHeight(){ return new Promise ((resolve,reject)=>{ let that = this; let query = wx.cre

数据不渲染问题由于vue生命周期的原因， 如果在一个页面中使用组件，这个组件也刚好用到vuex中的数据，此时如果修改vuex中state中的值，界面是不会重新渲染的。除非页面刷新重新加载，组件生命周期重新开始，才能拿到最新的值；上代码：data() {return {tableData: this.$store.state.name};}如果通过：this.$store.commit('CHANGE_NAME',{name})这种方式改变state中的值是不会重新渲染的。解决方式

tabs标签滚动最近公司需要优化tab的滚动效果，看了很多大佬的写法，很不明白，就自己研究了一下，虽然简单，但总算实现自己想要的效果了。html代码：<view class='content'> <scroll-view scroll-x="{{scrollX}}" class='scroll-tab' scroll-left='{{scrollLeft}}px' scroll-with-animation style="background-color:{{boxBg}};