微信小程序自定义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 相关文章推荐
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
微信小程序登录session的使用
Mar 17 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 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
Dedecms常用函数解析
2008/02/01 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php xhprof使用实例详解
2019/04/15 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python表达式的优先级详解
2020/02/18 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
scrapy头部修改的方法详解
2020/12/06 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
信息工程学院毕业生推荐信
2013/11/05 职场文书
房屋租赁协议书
2014/04/10 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
实习推荐信格式模板
2015/03/27 职场文书
学历证明范文
2015/06/16 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js