手机端的logo设计需要什么内容怎么保持没内容的时候在手机最底端,有内容可滑动的时候展示在内容的最下面

来源：蜘蛛抓取(WebSpider) 时间：2018-04-18 09:41 标签： logo设计需要什么内容
注册 | 登录
投稿、稿件问题联系Q：
零基础学产品，BAT产品总监带，2天线下集训+1年在线课程，全面掌握优秀产品经理必备技能。
axure 8.0出了这么久了，在不久前出了正式版，正式版相对于测试版，相对稳定了好多。然而8.0相对于7.0在功能上又丰富了好多，主要增加了对设计这一块的功能，对于一些要求不是很高的设计，在8.0上就可以完成。
今天就以8.0，写了一篇关于模拟手机端纵向滑动的效果。
当我们的手机的内容超过屏幕尺寸的时候，就需要滑动浏览之前未出现的内容。
此份教程也可以模拟出上拉刷新和下拉刷新事件。
先看预览效果吧：
OK，话不多说，接下来进入正题。
因为是教程，所以很多对于设计和排版上就没过多的装饰了，这里主要有三个部分：一个是状态栏、内容、底栏。这次要操作的部件就是“内容”面板。内容面板一共有两个面板组成，最外层的面板的作用是固定尺寸，固定拖动的范围。第二个面板作用是固定内容，添加事件，完成交互效果。如下图
这里要添加事件的是“内容”面板，也就是里层的面板，这里涉及到两个事件：“on drag”拖动事件和“on drag drop”拖动停下事件。
“on drag”，该事件的作用是，让我们的面板能够被拖动，并限制拖动的方向和范围。这里设置的是y轴方向拖动。
接下来是比较重要的，如果只有上面的事件，当我们预览的时候会发现，我们拖动中间的内容面板，面板会超过屏幕尺寸，在距底栏和状态栏会有一片空白。这时就需要第二个事件“on drag drop”，拖动落下时。增加这个条件，就可以防止上面的情况发生。
在添加下面事件之前，我们需要确定两个位置，一个是“内容”面板的起始位置，也就是离开状态栏时的位置，这里是（0，5）第二个位置是，内容面板离开底栏时的位置，这里的坐标是（0，-435）。
双击“on drag drop”，添加条件，如下图：
这里解释一下这个条件，这里一共两个值和一个条件，一个值是this.y，这里的this就是当前所操作的部件，这里是“内容”面板，第二个值是5，5是“内容”面板起始所在位置。整句条件表达式的意思是，当我们拖动时，如果“内容”面板的y坐标大于或等于5，就让“内容”面板回到该位置。
同理：当向上拖动面板时，如果“内容”面板离开了底栏，也就是y坐标小于了－435，就让面板回到该位置。
到此，整个教程就完成了，可以预览一下效果了。
做这种效果，其实方法还是有很多的，接下来可以再介绍一个方法，在文章之前提到了状态栏和底栏，我们可以根据它们的所在位置，设置如下条件。
方法很多，就看大家对事件的理解程度和对软件的熟悉程度了。
这里就不放原型原件了，毕竟交互比较简单，看教程也应该能做出来，而且放了原件，如果某些童鞋实在做不出来，直接看的原件，就没有了求学的欲望，这样还是不可行的。所以希望大家多多摸索摸索，熟悉熟悉部件和事件。axure是个比较强大的工具，好好利用。
作者：叶强（微信号Jason_Ye），1年互联网产品设计经验，SaaS行业。
本文由 @叶强 原创发布于人人都是产品经理。未经许可，禁止转载。
收藏已收藏 | 149赞已赞 | 16
投稿、稿件问题联系Q：
产品经理群
运营交流群
数据分析群
文案交流群
Axure交流群
关注微信公众号
大家都在问
6个回答7人关注
13个回答18人关注
12个回答11人关注
17个回答62人关注
15个回答23人关注
21个回答72人关注实现手机端web向上滑动时顶部导航条固定跟随，向下滑动时顶部隐藏，底部导航条固定跟随_百度知道
实现手机端web向上滑动时顶部导航条固定跟随，向下滑动时顶部隐藏，底部导航条固定跟随
如题目效果，用js能实现吗，用于移动端网页
我有更好的答案
用 touch事件
ontouchmove
滑动的时候 判断一下
starX&endX
那就是向上滑动那时候
给你想要隐藏的加一个属性display=&none&;导航条规定跟随
用position:
采纳率：70%
来自团队：
为您推荐：
其他类似问题
导航条的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
html 部分布局
&p&段落1&/p&
&p&段落2&/p&
&p&段落3&/p&
&p&段落50&/p&
&div class="fixed"&&/div&
css 遮罩样式
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 999;
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
方法一：外层在包一层div，宽高和屏幕一样，当遮罩层出现时，外层div的overflow:关闭遮罩时overflow:方法二：使用插件iscroll5.js 模拟原生的滚动条
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题我感觉你可以在遮罩层上 阻止默认事件和事件冒泡。把滑动相关的事件都干掉应该可以吧
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。HTML5的footer怎么在body的内容不满一屏幕时置于页面最底部？求大神指点，谢谢！_百度知道
HTML5的footer怎么在body的内容不满一屏幕时置于页面最底部？求大神指点，谢谢！
&div class=&container&&
&p&地址：深圳深南大道2008号中国凤凰大厦1栋13层&/p&
&p&copyright & 琴韵天下版权所有
ICP备案：粤ICP备号-3&/p&
&/div&&/footer&
我有更好的答案
css实现，无论body内容是否已满，footer都应该会在下面 position:
这个只适应不满一个屏的情况，但如果他有4个屏的长度最后一屏不满，要求footer至底，，这句代码只会在第一屏就至底，求指教。谢谢
你要清楚。footer所在的底部，不是body的底部，而是浏览器的底部！你要求的是在body的底部？
&&header&&!--头部--&&/header&&&&section&&!--内容--&&/section&&&&footer&&!--尾部--&&/footer&section{&&&&width:99.5%;&&&&overflow-x:&&&&overflow-y:&&&&height:100%;}header{&&&&width:100%;&&&&height:50&&&&font-family:&微软雅黑&;&&&&box-shadow:&0px&0px&5px󙀸&&&&background:#&&&&position:&&&&left:0&&&&top:0&&&&z-index:999;}footer{&&&&&position:&&&&&bottom:&0&&&&left:0&&&&width:&100%;&&&&height:&50&&&&z-index:999;&&&&background:#&&&&box-shadow:&0px&0px&5px󙀸}
采纳率：56%
为您推荐：
其他类似问题
html5的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
html 部分布局
&p&段落1&/p&
&p&段落2&/p&
&p&段落3&/p&
&p&段落50&/p&
&div class="fixed"&&/div&
css 遮罩样式
bottom: 0;
background-color: rgba(0,0,0,.3);
z-index: 999;
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题我感觉你可以在遮罩层上 阻止默认事件和事件冒泡。把滑动相关的事件都干掉应该可以吧
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
方法一：外层在包一层div，宽高和屏幕一样，当遮罩层出现时，外层div的overflow:关闭遮罩时overflow:方法二：使用插件iscroll5.js 模拟原生的滚动条
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

我要回帖

更多关于 logo设计需要什么内容 的文章

 

随机推荐