作为从小程序第一天内测就开车的老司机,分享一些界面方面的开发技巧,干货满满
搜索框+View
搜索框设为 position: fixed; z-index: 100; 下面放一个和搜索框高度相同的view(不要设置margin-top或padding-top,显示会有问题)
搜索框+ScrollView
搜索框设为 position: fixed,高度设为百分比形式,下面放一个和搜索框高度相同的view,scrollview的高度设为(100-搜索框高度)%
首先统一设置加载样式(参考微信官方ui库,weui)
<!--loading-->
<view hidden="{{!showLoadMore}}" class="weui-loadmore">
<view class="weui-loading"/>
<view class="weui-loadmore__tips">正在加载...</view>
</view>
<!--no-more-->
<view hidden="{{!showNoMore}}" class="weui-loadmore weui-loadmore_line">
<view class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot" />
</view>
然后在页面底部引用,若使用scrollvirw则需要将其包在中间
目前还没有发现实现这种效果的小程序,大部分(包括腾讯自选股,腾讯新闻)顶部都是没有滑动动画的,体验很不友好
实现方法:
采用自定义的toast(一张gif图即可),如腾讯自选股,也可以简单点像这样
原因是各平台的默认行高大约是 110% 到 120%,都不一样,所以看起来差很多,因此需要手动设置(line-height:150%)
很多视频类小程序拖拽video组件会造成位置错误问题,因此需要保证video组件不能被拖拽,将disableScroll设置为true,video用view包裹(不需要fixed,使用flex即可),view高度使用百分比,底部使用scrollview,高度为(100-view高度)%