微信小程序自定义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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
基于PHP生成静态页的实现方法
2013/05/10 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
简单谈谈favicon
2015/06/10 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
JS无限级导航菜单实现方法
2019/01/05 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python使用gensim计算文档相似性
2016/04/10 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
Django的CVB实例详解
2020/02/10 Python
python文件排序的方法总结
2020/09/13 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
给导游的表扬信
2014/01/10 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
老员工辞职信范文
2015/05/12 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
MySQL创建管理HASH分区
2022/04/13 MySQL