美文网首页
页面滑动导航条开发

页面滑动导航条开发

作者: 攻城熊 | 来源:发表于2019-01-08 21:50 被阅读0次

    效果如上.

         注意事项:

            1. 需要滑动的元素不可以用 float 浮动,float浮动成为同一行,需要父元素拥有足够的宽度。应使用dislay:inline-block; 进行元素的横向编排,同时需要确定每个滑动的小元素的宽度。

            2.inline行内元素,inline-block行内块元素,block块元素三者之间的侧重点

           作者:Ry-yuan

           本文地址:http://www.cnblogs.com/Ry-yuan/p/6848197.html

            3.  包裹 scroll-view 的大盒子有明确的宽和加上样式-->            overflow:hidden;white-space:nowrap;   还需要scroll-x属性 。

         app上则可以在ul上使用如下:

             overflow-x: scroll;

             overflow-y: hidden;

             white-space: nowrap;    规定如何处理元素中的空白。

             width: calc(100% - 0.67rem);

             nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

    需要注意文本不换行与所在元素的宽度的关系。

            4.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;

           5.微信开发者工具上无法滑动,但是真机测试都是可以滑动的,无论安卓,ios 

           6.display,布局的最基础样式,了解各种布局方式的适用场景。

           7.css最基础的 文本属性(Text),还需要学习        http://www.w3school.com.cn/cssref/index.asp#contentpm

    相关文章

      网友评论

          本文标题:页面滑动导航条开发

          本文链接:https://www.haomeiwen.com/subject/xdfirqtx.html