小程序开发遇坑tips

最新推荐文章于 2023-07-26 10:54:52 发布

Joey0428

最新推荐文章于 2023-07-26 10:54:52 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：前端微信小程序开发遇坑

本文链接：https://blog.youkuaiyun.com/Jowe940428/article/details/80074755

小程序专栏收录该内容

4 篇文章

订阅专栏

本文探讨了小程序中遮罩层的实现方法及其滚动穿透问题，并提供了代码示例。同时，介绍了如何实现循环动画效果及注意事项，还讨论了web-view标签的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于遮罩层滚动穿透问题

<!--wxml-->
<view class="mask" wx:if="{{hasMask}}">
    我是遮罩层
</view>
<view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
    我是页面内容
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //显示遮罩
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //隐藏遮罩
        this.setData({
            hasMask:false
        })
    },
}

也可以参考下面链接：点击打开链接

小程序background-image 只能用网络url或者base64 . 本地图片要用image标签才行。也可以使用将文字定位在image标签上方的方法。
可参考下面链接：点击打开链接

开发过程中遇到一个问题，怎么实现通知动画的循环效果，目前只是做到了一个初步效果，但是不能达到满意效果

<view animation="{{animationOut}}">
    <image src="背景图片地址"></image>
    <text>文字</text>
</view>

async onShow() 
      // animation效果
      let that = this
      let allLen = that.announceList.length
      let num = 0
      that.interval = setInterval(() => {
        this.animationInterval(allLen, num)
        num++
        if (num === allLen) {
          clearInterval(that.interval)
        }
      }, 6000)
      that.$apply()
    }

    async animationInterval(allLen, num) {
      let animationOut = wepy.createAnimation({duration: 3000})
      this.animationOut = animationOut
      animationOut.opacity(0.99).step()
      animationOut.opacity(0).step({delay: 1500})
      this.name = this.announceList[num].name
      this.amount = this.announceList[num].amount
      this.animationOut = animationOut.export()
      this.animationOut.t = num
      this.$apply()
    }

web-view标签使用时要单独新建页面newPage，在通过navigaTo标签的url带参数传输时，如遇到传输链接使用encodeURLComponent(url)对链接进行加密，在newPage页面要使用decodeURLComponent(url)进行解密
倒计时问题：每次在onLoad()或者onShow()函数中调用倒计时函数时，会导致倒计时出现混乱，乱跳的问题
解决思路：只在初次进入页面时调用倒计时函数，之后不再调用该函数
解决方法：在page外定义i=0，在page内i++，if(i == 1){调用倒计时函数}
在ios使用position：absolute在父元素上必须用position：relative
将图片信息转换为base64：查看链接
小程序引入iconfont字体需要先将css文件下载到本地，然后在使用的页面@import，切记，是在.wpy页面，在.css和.less等页面引入有时会出现无法使用的问题