1.个人简介页面
background-position: center; background-size: cover;可以设置背景图片的不变形显示和内容居中
背景图上显示文字内容很不清楚，可以用为元素添加一个灰色蒙版，在用白色文字就可以清楚显示
text-indent: 20rpx;文字首行缩进
2.demos页面
上面是个固定的点击之后滑动条回滚到顶部，其中用bindscroll绑定函数监听滚动条，如果已经是顶部则弹出对话框提示用户到顶了
下面的内容是一个scroll-view 中装的列表渲染的内容.点击跳转可以用微信自带的navigator标签，将index传个子页面来动态显示子页面的内容
scroll-view 具体有那些属性可以方法可以查看文档，其中我遇到的一个问题是 scroll-top/scroll-left 并不能进入页面直接触发，需要一个点击或者说是触发器
如果列表中有双重列表渲染最好把index和item指定一下
初始显示页面可以用过度效果，在页面ready时候将show改成true，添加过度类，页面onUnload的时候改成false，这样第一次加载会过度，切换不会有过度
3.demos详情页
用过url传参进来加载不同的内容，大图下面有个导航栏，点击切换（display none 和block），内容和导航切换都加了过度效果，都用的transition 配合opacity 来实现（opacity加在父容器上）
在浏览内容下滑到一定距离时导航栏固定在顶部
style="position:{{barfix?'fixed;top:0':''}}"
4.
最后这个就比较简单就是一个backgroun url 中间用一个伪元素配合rgba 实现透明（直接元素加rgba好像有bug），注意一下其中内容加上zindex 不然内容会和背景一样透明
网友评论