1.问题:scroll-view 和 swiper中不能push 过多dom,如果展示商品列表类的数据,需要一直下拉到底加载或者点击加载更多,只能放在view中 使用"onReachBottomDistance": 50,页面中使用
// pages.json
{
"path": "pages/home/home",
"style": {
"navigationBarBackgroundColor": "#fdb913",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "xxx",
"onReachBottomDistance": 50
}
},
// 需要加载更多的页面
// 页面上拉触底事件
onReachBottom: function () {
// this.pullup() 加载更多
}
2.问题 需要使用轮播图且需要进行顶部导航栏整体翻页的,swiper里不能嵌套swiper,嵌套了也实现不了,swiper整体翻页的时候,整体就翻了,轮播图不能单独进行手动滑动,可能是我不会,,,还需要写什么事件? 反正我是放弃了实现这个功能。
3.加载更多动画 加载组件please移步到https://blog.csdn.net/XiaoYi0215/article/details/86480868
4.滑动ScrollTop > 44 顶部导航栏置顶 跨端兼容
app==> APP-PLUS
h5==>H5
小程序==>MP-WEIXIN
API 的条件编译写法://#ifdef %PLATFORM% 平台特有的API实现 //#endif
组件的条件编译写法:<!-- #ifdef %PLATFORM% --> 平台特有的组件 <!-- #endif -->
样式的条件编译写法:/* #ifdef %PLATFORM% */ 平台特有样式 /* #endif */
// js 监听页面滚动
onPageScroll: function (e) {
console.log(e)
if (e.scrollTop > 44) {
this.scrollTop = true;
} else {
this.scrollTop = false;
}
}
// 页面 绑定class:uni-tab-bar-fixed
<view class="uni-tab-bar" :class="{'uni-tab-bar-fixed': scrollTop}">
<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']"
:id="tab.id" :data-current="index" @tap="tapTab">{{tab.name}}
<view class="my-line"></view>
</view>
</scroll-view>
<view class="uni-icon uni-icon-down icon-down"></view>
</view>
// css
.uni-tab-bar-fixed {
position: fixed;
top: 0;
margin-top: 0;
z-index: 99;
}
/* #ifdef H5 */
.uni-tab-bar-fixed {
position: fixed;
top: 80upx;
z-index: 99;
}
/* #endif */
5.uni-app 自定义按钮图标使用
app-plus不支持网路地址,所以,要将iconfont.cn中使用到的字体图标下载到本地,复制iconfont.ttf文件放到static文件夹中使用相对路径引入。
"buttons": [{
"fontSrc": "./static/my.ttf",
"text": "\ue62f"
}]
放到其他文件夹 使用_或者./ 都无效。。。大家用的其他的有效的方法可以来评论下。
6.获取版本号:plus.runtime.version
http://www.html5plus.org/doc/zh_cn/runtime.html#plus.runtime.getPropert
****----未完待续