uni-app 问题

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 */

// 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

****----未完待续

猜你喜欢