美文网首页
小程序相关问题与总结

小程序相关问题与总结

作者: 猫晓封浪 | 来源:发表于2019-06-05 11:18 被阅读0次

    1. box-shadow在真机不显示问题,和ios问题

    当设置好 box-shadow 时发现在开发者工具上显示阴影,但是到真机上不显示。且在ios上不显示问题。

    box-shadow:0 2rpx 10rpx 2rpx rgba(73,101,210, 0.5); /*for Android*/
    -webkit-box-shadow: 0 1px 5px 1px rgba(73,101,210, 0.5); /*for IOS*/
    

    如上,颜色不应使用十六进制,使用 rgba 模式。且在 ios 上使用 -webkit- 兼容ios设备。

    2. tab栏切换时,字体颜色等样式切换

    需要切换样式的按钮(或输入框等)绑定不同事件,通过点击切换 data 中数据状态实现类名的动态绑定。

    <view class='{{xxx?"yyy":""}}'></view>
    

    其中 xxxdata 中数据用来实现 yyy 类名的存在与否(三元表达式)。点击事件用来切换 data 数据中的 xxxtruefalse 值。

    3.小程序中 map 地图组件和底部 tab 栏层级问题

    在小程序中 map 组件的层级和底部 tab 栏的层级是最高且无法改变的,所以当这两个组件存在时想要在其上方做一个遮罩层,无论怎么设置遮罩层的层级都无法遮住这两个组件。
    解决方法:当有遮罩层存在的时候将小程序中的 map 组件和 tab 栏组件隐藏。
    map 组件可以通过设置标签的 hidden 属性进行隐藏
    tabBar 则需要调用 wx.hideTabBar()(在页面加载时)和 wx.showTabBar()(去掉遮罩层时)

    4.关于ios系统小程序 margin-bottom 无效的解决方法

    使用 padding-bottom 替换 margin-bottom

    5.小程序中textarea层级过高问题

    可以使用 cover-view 解决,官方文档 注:应当使用 cover-view 内含有 button 组件,且最好给外层一个高度,否则可能会出现在真机不显示问题
    上边问题3中 map 等组件的层级问题都可以使用 cover-view 解决,详见官方文档

    6.小程序中textarea输入最大长度问题

    如果不给 textarea 一个 maxlength 属性, textarea组件会有一个默认最大长度,所以当输入很多文字时会发现即使没有设置最大长度也会输入不完整。
    解决方法: maxlength="-1"

    相关文章

      网友评论

          本文标题:小程序相关问题与总结

          本文链接:https://www.haomeiwen.com/subject/xucmoqtx.html