微信小程序自定义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页面上使用动态时间具体实现
Mar 18 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 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通过文件流方式复制文件的方法
2015/03/13 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
实习评语大全
2014/04/26 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
亲属关系公证书样本
2015/01/23 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Python打包exe时各种异常处理方案总结
2021/05/18 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
vue 给数组添加新对象并赋值
2022/04/20 Vue.js