微信小程序简历遇到的问题总结

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 不然内容会和背景一样透明

你可能感兴趣的:(微信小程序简历遇到的问题总结)