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


Posted in Javascript onNovember 01, 2019

微信小程序自定义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没出来

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

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不兼容)

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

总结

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

Javascript 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
微信小程序 WebSocket详解及应用
Jan 21 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 #Javascript
浅析js实现网页截图的两种方式
Nov 01 #Javascript
javascript使用链接跨域下载图片
Nov 01 #Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP正则验证Email的方法
2015/06/15 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python梯度下降法的简单示例
2018/08/31 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python 多线程中join()的作用
2020/10/29 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
财务人员个人自荐信范文
2013/09/26 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
趣味活动策划方案
2014/02/08 职场文书
环保建议书
2014/03/12 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
体育馆的标语
2014/06/24 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技
HttpClient实现表单提交上传文件
2022/08/14 Java/Android