总结分享一些小程序开发中遇到的问题（帮助避坑）

本文总结了之前在微信小程序开发中遇到的一些问题，并与您分享解决方案，希望对您有所帮助！

呈现时以块形式包装列表。

{{index}}: {{item}}块不会呈现在页面上，但将仅用作包装元素并接受控件属性。

编写自定义组件

自定义组件分为四个部分。

属性组件接收属性。

属性:{//输入框的默认提示占位符:{type: string，//属性值的类型值:& # 39；'//属性默认值}}，数据组件数据

方法组件方法，一般内部方法以_

组件的生命周期功能，一般使用ready，在组件布局完成后执行，此时可以获取节点信息（使用SelectorQuery）。

调用父组件传入的方法

//子组件var myEventDetail = { value:& # 39；'};// detail对象，提供给事件侦听器函数，并写入需要发送到外部的数据，var myevent option = { }//this . triggerevent（& # 39；onclear & # 39，myEventDetail，myEventOption）//父组件on search（e）{ console . log（e . detail . value）}父组件直接调用子组件的方法。

//父组件，使用selectComponent获取子组件的实例，并直接调用方法let search bar = this。选择组件（& # 39；# search -bar & # 39；);search bar . setdata（{ value:e . current target . dataset . name }）search bar . onclick search（{ detail:{ value:e . current target . dataset . name } }）；从子组件获取dom宽度和高度

//获取屏幕宽度LetwindowWidth = wx . getsysteminfosync（）。window width//您需要编写这个let query = wx . createselectorquery（）。在这个组件里面；让那个=这个；query . select all（& # 39；。tagItem & # 39).boundingClientRect（）query . exec（function（RES）{ let all width = 0；RES【0】。map（item =》{ all width = all width+item . width return all width }）let length = RES【0】。length let ratio width = all width/window width that . setdata（{ all length:length，iphone:ratio width+（length = = 1？0:RES【0】。length * 0.0533）}）页面返回时不会调用onLoad。

之前，我将调用接口的部分编写到onLoad中，从文章列表进入详细信息页面，然后从详细信息页面单击左上角返回列表页面。列表页面的阅读数应该更新，但没有更新，因为文章列表界面没有重新调整。

所以调整文章列表界面的部分是用onShow写的。

自定义标签栏优化

第一个优化是将组件封装的tabbar更改为页面的模板形式。

1.以前是以组件的形式编写的，后来改为模板；；tabbar上的图标全部改为iconfont，解决了点击tabbar时闪烁的问题。

{ { item . text } } { { tabbar . num》99？'99+':tabbar.num}}2。当单击tabbar时，您需要销毁上一个页面，然后跳转到需要跳转的页面，因此您使用navigator组件中的重新启动。

在第二次优化中，将所有带有tabbar的页面打包成组件并写入页面，通过页面中的setData切换tab。

修改地点:

带有tabbar的页面被重写为组件。

因为在组件中挂载后只有ready方法，所以上一页中的onShow、onReachBottom和onPullDownRefresh都在父页上调用。

OnpullDownrefresh:function（）{ if（this . data . tabbarid = = this . data . tabbar list . article）{//使用selectComponent查找组件实例，并调用内部方法Letarticlepage = this . select component（& # 39；#第3条+第&#39页；);article page . onpulldownrefresh（）；} else if（this . data . tabbarid = = = this . data . tabbar list . doctor）{ let doctor page = this . select component（& # 39；# doctor -page & # 39；);doctor page . onpulldownrefresh（）；} else { wx . stoppulldownrefresh（）；}}，所带来的问题:

即使不需要下拉刷新，每个tabbar也会有下拉刷新效果。

单击其他页面上的按钮，直接跳转到主页上的选项卡。可能会有问题。

使用图标字体

https://www.jianshu.com/p/1cfc074eeb75

登录iconfont.cn下载zip包。

解压缩并转换。在transfonter.org/.上将ttf文件转换为base64格式

将style.css写入新创建的iconfont.wxss中，上面的字体文件路径被替换为刚刚改进的base64。

在app.wxss中导入iconfont.wxss

注意:组件本身中的样式不受app.wxss的影响。因此，当组件中需要iconfont时，您需要手动引用app.wxss或iconfont.wxss

列表的左侧滑动效果

1.将事件绑定到列表的父元素。

滑动内容滑动后显示的按钮。list -容器{位置:相对；宽度:100%；高度:224rpx溢出:隐藏；}。list -项目{ position:absolute；左:0；z-指数:5；转场:左0.2s ease -in-out；background -color:# fff；}.背面{ box -尺寸:border -盒子；宽度:200rpx身高:218rpx位置:绝对；右:0；top:0；z-指数:4；}2.通过判断滑动距离来修改列表项的左值。

ontouchstartlist:function（e）{//如果（e . touches . length = = = 1）{////记下触摸点距离屏幕边缘的X轴位置this . setdata（{ startx:e . touches【0】），则表示单次触摸。Clientx，}）} }，onTouchMoveListItem:function（e）{ var that = this if（e . touches . length = = 1）{ var disX = that . data . startx -e . touches【0】。clientXvar deleteBtnWidth = that . data . deleteBtnWidth；var txt style =““；if（disX《deleteBtnWidth/4）{ txt style =“left:0 rpx“；} else { txt style =“left:-“+deleteBtnWidth+“rpx“；} var index = e . current target . idvar list = that . data . doctor list . list list【index】。txtStyle = txtStylethat . setdata（{ doctor list:{ list:list，total:that . data . doctor list . total } }）} }，onTouchEndListItem:function（e）{ var that = this if（e . changed touches . length = = 1）{ var endX = e . changed touches【0】。clientXvar disX = that . data . startx -endX；var deleteBtnWidth = that . data . deleteBtnWidth；var txt style = disX》deleteBtnWidth/2？“left:-“+deleteBtnWidth+“px“:“left:0px“；var index = e . current target . idvar list = that . data . doctor list . list list【index】。txtStyle = txtStylethat . setdata（{ doctor list:{ list:list，total:that . data . doctor list . total } }）；}}、【相关学习推荐:小程序开发教程】

以上是总结分享小程序开发中遇到的一些问题（帮助避坑）的详细内容。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 小程序开发需要注意什么？
• 下面我们来看看小程序开发游戏的注意事项(如何开发微信小程序游戏)
• 总结小程序开发中遇到的问题(使用小程序遇到的问题)
• 总结一些小程序开发中遇到的问题(帮助避坑)(微信小程序开发中遇到的困难)

本文由主机参考刊发，转载请注明：总结分享一些小程序开发中遇到的问题（帮助避坑） https://zhujicankao.com/104643.html