微信小程序自定义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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
js微信支付实现代码
Dec 22 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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中SESSION的注销与清除
2015/04/16 PHP
php阳历转农历优化版
2016/08/08 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
高三学习决心书
2014/03/11 职场文书
保护环境建议书300字
2014/05/13 职场文书
新党章的学习心得体会
2014/11/07 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python