微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

 更新时间:2019年11月01日 09:27:38   转载 作者:曾经的水哥  
这篇文章主要介绍了微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容问题,需要的朋友可以参考下

微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容,具体内容如下所示:

1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来

<cover-view class="tab-bar">
 <cover-view class="tab-bar-border"></cover-view>
 <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
  <cover-image src="{{item.checked ? item.selectedIconPath : item.iconPath}}" ></cover-image>
  <cover-view >{{item.text}}</cover-view>
 </cover-view>
</cover-view>

2.实际效果如下: 底部的tabbar没出来

3.把 cover-view 改成 view  把  cover-image 改成 image 标签

<view class="tab-bar">
 <view class="tab-bar-border"></view>
 <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
  <image src="{{item.checked ? item.selectedIconPath : item.iconPath}}" ></image>
  <view >{{item.text}}</view>
 </view>
</view>

4. 记得把你的css 样式也改一下啊  默认的  class 有cover-view cover-image

5.现在的效果如下

总结

以上所述是小编给大家介绍的微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • JavaScript使用原型和原型链实现对象继承的方法详解

    JavaScript使用原型和原型链实现对象继承的方法详解

    这篇文章主要介绍了JavaScript使用原型和原型链实现对象继承的方法,简单讲述了javascript原型与原型链的原理,并结合实例形式详细分析了javascript中对象继承的常见实现技巧,需要的朋友可以参考下
    2017-04-04
  • js窗口震动小程序分享

    js窗口震动小程序分享

    这篇文章主要为大家分享了js窗口震动小程序,可设置抖动的频率,范围,和次数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JS实现div居中示例

    JS实现div居中示例

    div居中的方法有很多,网上可以找得到,但是本文要介绍的是使用JS实现的,比较另类,大家不妨参考下
    2014-04-04
  • 微信小程序异步API为Promise简化异步编程的操作方法

    微信小程序异步API为Promise简化异步编程的操作方法

    把微信小程序异步API转化为Promise。用Promise处理异步操作很方便。下面小编给大家带来了微信小程序异步API为Promise简化异步编程的操作方法,感兴趣的朋友一起看看吧
    2018-08-08
  • Javascript的&&和||的另类用法

    Javascript的&&和||的另类用法

    这篇文章主要介绍了Javascript的&&和||的另类用法,需要的朋友可以参考下
    2014-07-07
  • 详解如何优雅地在React项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Javascript 跨域访问解决方案

    Javascript 跨域访问解决方案

    由于安全方面的考虑,Javascript被限制了跨域访问的能力,但是有时候我们希望能够做一些合理的跨域访问的事情,那么怎么办呢?
    2009-02-02
  • JavaScript中标识符提升问题

    JavaScript中标识符提升问题

    标识符指的是javascript中定义的符号,标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成,但标识符不能以数字开头,也不能是javascript中的保留关键字。并且要注意,javascript是严格区分大小写的。
    2015-06-06
  • 基于JS+Canves实现点击按钮水波纹效果

    基于JS+Canves实现点击按钮水波纹效果

    本文给大家分享基于js和canves实现点击按钮水波纹效果,效果非常逼真,对此感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript获取DOM元素的11种方法总结

    JavaScript获取DOM元素的11种方法总结

    这篇文章主要介绍了JavaScript获取DOM元素的11种方法总结,本文用分4大类11个方法总结如何获取DOM元素,需要的朋友可以参考下
    2015-04-04

最新评论