在游戏中，经常会遇到滚动界面，或者滚动列表，在滚动时，为了给用户一个更好的体验，我们会想到在滚动界面的旁边加上一个小小的滚动条，让这个滚动条和滚动界面的同步运动来告诉用户，这个滚动界面还有多少距离到底部等。下面我就来说下我在cocos2dx中具体怎么来实现这一功能。我下面说的是竖着滚动的，所以大小等只针对高。当然横向的原理也是一样的！
 
首先你要有一个滚动界面控件，也就是ScrollView控件（当然ListView也一样，它是继承前者的）然后有一个表示小小的滚动条的sprite。经过观察别的应用在处理这个问题的时候，我们会发现这个小小的滚动条的大小会随着滚动页面所需要滚动的总大小而变化（下图中H2，有个时候，这个滚动界面是动态的发生变化的，比如qq的好友列表，你往下拉，他的那个列表才会加长，这样你会发现旁边的那个小滚动条的长度在减少），所以第一步，我们要得到小滚动条的长度：即下图h1，其实里面的算法逻辑很简单，很容易得出结论：滚动界面的高 H1（也就是你实际看到的那个表面的滚动界面的高）和用户需要滚动的高H2（这个就是包含滚动界面中不被看到的部分，也就是我们裁剪掉的部分）的比值 等于小小滚动条的高h1（这个就是我们要得到的）和滚动界面的高H1。
 

 
 
不是美工，图片做的有点搓，见笑了。
 
其中 那个实框表示能给用户看到的滚动区域，下面的虚框是滚动界面的总大小，我们需要得到的是 小滚动条的大小h1 = H1 * H1 / H2(注意为了更精确，请使用float类型)
 
到此，解决了我们的第一个问题：小滚动条的长度问题。
 
接下来就是小滚动条的滚动位移的问题：
 
分析：首先要得到一个小滚动条的滚动因子，其实很简单，根据之前要实现滚动界面和小滚动条的同步，那么滚动界面滚动到底（即全部滚完）的时间和小滚动条滚动到底的时间是一样的，我们用s1来表示小滚动条滚动的距离，用s2来表示滚动界面滚动的距离，那么显然，每一次滚动的距离，即有这么一个关系 s1 / s2 = (H1 - h1) /  (H2 - H1); 我们用 float moveFactor = (H1 - h1) /  (H2 - H1) 来记录这个滚动因子。那么小滚动条移动的距离，永远是大滚动界面移动的距离的 moveFactor 倍，即 s1 = s2 *moveFactor  。这样我们只需要在大滚动界面的滚动事件里面得到他的滚动距离s2，那么我就就可以对小滚动条做出滚动距离的变化了。
 
实现：因为无论是ScrollView还是ListView他们的滑动不需要我们处理，这里我们只要在滚动界面滑动的时候，让小滚动条也跟着滚动就行了，查看ScrollView的类，发现有以下监听事件：
 

enum class EventType
    {
        SCROLL_TO_TOP,
        SCROLL_TO_BOTTOM,
        SCROLL_TO_LEFT,
        SCROLL_TO_RIGHT,
        SCROLLING,
        BOUNCE_TOP,
        BOUNCE_BOTTOM,
        BOUNCE_LEFT,
        BOUNCE_RIGHT
    };
 
显而易见，我们需要的是SCROLLING事件，于是注册监听事件（不要告诉我你不会，不会可以看引擎自带的test项目工程），在回调函数里面来实现小滚动条的移动。
 
 
void HelloWorld::touchListViewBack(Ref* ref ,ui::ScrollView::EventType type)
{
	auto touchTarget = dynamic_cast<ScrollView*>(ref);
	if (type == ScrollView::EventType::SCROLLING)  //正在滚动
	{
		m_pos2= touchTarget->getInnerContainer()->getPositionY();
                s2 = m_pos2 - m_pos1;
		s1= s2 *moveFactor;
		m_pos1=m_pos2;
		m_spHuaDongTiao->setPositionY(m_spHuaDongTiao->getPositionY() + s1* (-1)); //*（-1）表示方向相反
	}
}
touchTarget : 当然就是注册滚动事件的ScrollView 或者listview, m_spHuaDongTiao:当然就是小滑动条精灵了，m_pos1 和m_pos2是一对float用来处理每一次调用此回调函数时，大滚动界面滚动的距离：即进入此函数，得到当前滚动界面内容器（注意请用这个函数：->getInnerContainer()）的位置，然后减去上一次的位置，即是改变值，那么小滑动条的改变值就是此值的moveFactor倍了。然后再更新一下m_pos1。最后设置一下小滑动条的位移就搞定了。这样，就彻底实现了 两者之间的同步问题。写得比较混乱，但是我相信聪明的你，肯定看的懂的！

 

 

 
 

 
来源 | 般若无界
 
作者 | 舒欣 
 
效果展示
 
前两天我收到策划妹子的请求，需要在微信公众号里面做一篇推文。这个推文和以往不同，需要有两张图片无缝拼接，并且下方图片可以滚动的效果。
 
这个效果目前用微信自带的编辑器是无法实现的，毕竟功能有限，而这个需求也相对要小众一些。不过这个效果是很不错的，在微信推文中浏览会让人耳目一新。
 

  
  
 
 
从上图可以看出，首先是一张海报，乍一看没什么，以为就是一张图片。当你用手指滑动屏幕看下面内容时，你会惊奇的发现海报下半部分的内容时是可以滚动的，而且滚动到最底部后海报又回到了最初的状态。是不是很神奇？下面小编我将带你一探究竟！
 
技术实现原理
 
之前我们技术部做过一个端午节的推文，和这个类似，只不过那个是上面滚动下面固定，而这个是反过来了。端午节的推文案例效果如下：
 

 
我仔细看了下源码，发现原理是类似的。这个技术的关键有两点，一是上下两张图要无缝衔接，而且宽度要相同。
 
二是图片固定区域滚动，下面的长图不能一开始全部显示出来，而是先显示开头的一部分，这一部分的高度是固定的。
 
下面的内容初始隐藏，只有通过滚动才会出现下面的内容。滚动到最下方的时候，会发现海报合上了，这里其实是一个障眼法，下方图片的底部正好是和顶部一样的图（只有文字提示不一样），这里对设计有特殊要求，第二种长图的顶部和底部的内容是要保持高度一致的，为了实现这个效果，好的设计是必不可少的。理解了这两个技术点，制作起来就有思路，实现起来就会容易许多。
 
无缝衔接的实现
 
无缝衔接的核心技巧在于，使用 HTML 的section标签包裹img标签。要想让图片居中，则需要给section设置左右的 margin 为 auto，宽度为要显示的图片宽度。
 
在本案例中我设置的宽度是 311.5px，这样即便是在大屏手机上，也能让图片主题能够尽可能占用更大的区域，视觉效果更佳。
 
需要注意的是，图片的 src 路径需要提前在微信后台编辑器中上传图片，上传成功后点击图片取消勾选后，再右键复制图片链接，粘贴到src位置即可。下面是两张图片无缝衔接的代码示例：
 

 
<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径1}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>
<section style="width: {{图片宽度}};margin-right: auto;margin-left: auto;">
    <img class="" src="{{图片路径2}}" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;"
        data-type="jpeg" data-ratio="1.8925925925925926" data-w="1080"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
</section>

 
然而实际效果可能会和我们预想的有所出入，往往会出现两张图片依旧存在白边缝隙的问题，这时候只需要在section标签上加上margin-top:-1px即可。
 
如果还是有白边，继续手动调节，负值越小，两张图片的上下间距也就越小。
 
固定区域图片滚动的实现
 
这里使用的是一个固定的外层盒子，设置overflow-y:auto，同时设置height: 196px;，这样既能保证可视区域固定，也能使得这个区域可以进行滚动操作。
 
注意这里的 height 需要手动调节，多次在微信编辑器保存发送到手机预览，不断的尝试获得最合适的高度值。浏览器的效果和手机实测会有些许出入，需要耐心慢慢调节。
 

 
<section style="margin-top: 0px;">
    <section style="width: 311.5px;margin-right: auto;margin-left: auto;">
        <section style="background-image: url({{图片路径1}});background-size: 100% 100%;">
            <img class="" data-ratio="1.43671875" src="{{图片路径1}}"
                data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 0;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</section>
        <section style="border-width: 0px;border-style: none;overflow-y: auto;height: 196px;font-size: 0px;vertical-align: bottom;box-sizing: border-box;margin-top: 0px;">
            <section style="height: 1086.78px;">
                <img class="" data-ratio="3.025" src="{{图片路径2}}"
                    data-type="jpeg" data-w="1280" style="border-width: 0px;border-style: initial;border-color: initial;width: 311.5px !important;height: auto !important;opacity: 1;"> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</section>
        </section>
    </section>
</section>

 
上面的代码中，图片路径1表示的是上面固定大小海报，图片路径2是可以滚动的长图。
 
在这个环节我遇到了一个坑，那就是下面长图按照同事之前给的背景图片加图片透明的方案会使得 iPhone 手机可视区域高度变小，导致图片显示的内容不完整，而安卓手机是正常的。
 
这个 bug 和微信 iOS 版的页面渲染机制有关，刚发现的时候让人摸不着头脑。为了修复这个 bug，我后面采用了设置section标签定高的方法，也就是和实际图片显示高度一致，精确到小数点后两位，这样无论是什么系统的手机都能完美显示了！
 
section背景图+img透明的方案虽然有 bug，不过有个好处，就是你不用设置section的高度了，同时你可以在审查元素中可以看到section被撑开的高度，以便于获取到合适的section高度采用后面的改进方案。因此我在固定海报的图片上用的还是之前的方案，只是滚动图片不适用而已。
 
最后一步
 
看到这里你也许会问，代码我都按照你说的写好了，可是怎么放到微信文章里面去呢？答案其实很简单，这里用到了浏览器 hack 的小技巧。
 
你在微信编辑器的网页随便输入点内容，然后鼠标右键选择审查元素，审查文本框的内容，把里面的标签全部替换为你写好的代码就可以了！
 
总结
 
这个推文做下来最费时间的其实是微调，需要不断保存在手机上调试，而且不同的手机显示可能会不一样。我在制作的过程中做了一些艰难的取舍。
 
比方说 iPhone5s 上显示效果会比较差，滚动的区域和上方海报有缝隙，这是因为我的宽度设置的是 311.5px，而 iPhone5s 的设备宽度只有 320px，而且微信默认会给文章主体内容加左右内边距，这样就导致实际显示宽度会小于311.5px，那么原来的可视高度就显得不合适了。
 
如果把宽度设置为100%，这样显示的宽度是最合适的，然而图片是有宽高比的，宽度可以自适应，而可视区域的高度必须是固定的像素值，这样也不合适。
 
最终我选择的方案是给一个合适的固定宽度，高度根据宽度一点点手动调出来。这样一来只要是目前主流的大屏手机，显示的宽高都是固定的，效果也是一样的。只是宽屏手机左右的白边会多一些，宽度不能占满也是一个缺憾。
 
掌握了技术原理，实现起来并不十分困难，只是需要在兼容性和效果上做一些平衡，以及需要花费耐心做微调。看完这篇文章，相信你也能够轻松的做出这个推文效果。
 
关注【般若无界】公众号
 
了解更多精彩资讯
 

 


 
 

android学习笔记之——上下滚动和左右滚动的冲突解决  
 写在前面：开发中往往需要嵌套滚动控件，比如ScrollView嵌套recyclerview做成可上下左右滚动的样式，但是会出现卡顿现象，不容易快速的上下或者左右滚动，笔者在翻看了书籍资料以后，觉得这应该记录，特记下来以备不时之需，也给同样需求的程序员提供一种思路。
 
 
 重写最外滚动视图，如ScrollView内嵌套recyclerview，重写ScrollView
 
package com.chengbiao.calculator.reWrite;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.HorizontalScrollView;

/**
 * 项目名称：Calculator20180415
 * Created by Long on 2018/4/25.
 * 修改时间：2018/4/25 12:57
 */
public class MyHorizontalScrollView extends HorizontalScrollView {
    private static final String TAG ="MyHorizontalScrollView" ;
    private float mOffsetX,mOffsetY;
    private float mLastPosX,mLastPosY;

    public MyHorizontalScrollView(Context context) {
        this(context,null);
    }

    public MyHorizontalScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean result=false;
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN:
                mOffsetX=0.0F;
                mOffsetY=0.0F;
                mLastPosX=ev.getX();
                mLastPosY=ev.getY();
                result= super.onInterceptTouchEvent(ev);//false手势传递给子控件
                break;
                default:
                    float thisPosX=ev.getX();
                    float thisPosY=ev.getY();
                    Log.i(TAG, "onInterceptTouchEvent: thisposx,y：("+thisPosX+","+thisPosY+"）");
                    Log.i(TAG, "onInterceptTouchEvent: 初始mOffsetX，Y：("+mOffsetX+","+mOffsetY+"）");
                    mOffsetX+=Math.abs(thisPosX-mLastPosX);//x偏移
                    mOffsetY+=Math.abs(thisPosY-mLastPosY);//y轴偏移
                    Log.i(TAG, "onInterceptTouchEvent: 偏移后 mOffsetX，Y：("+mOffsetX+","+mOffsetY+"）");
                    Log.i(TAG, "onInterceptTouchEvent: 初始mLastPosX，Y：("+mLastPosX+","+mLastPosY+"）");

                    mLastPosY=thisPosY;
                    mLastPosX=thisPosX;
                    Log.i(TAG, "onInterceptTouchEvent: 之后mLastPosX，Y：("+mLastPosX+","+mLastPosY+"）");
                    if(mOffsetX<3&&mOffsetY<3)
                        result=false;//传给子控件
                    else if(mOffsetY<mOffsetX)
                        result =true;//不传给子控件，自己水平滑动
                    else
                        result=false;//传给子控件
                    break;
        }
        Log.i(TAG, "111111111111onInterceptTouchEvent: result:"+result);
        return result;
    }
}

}

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。
 
方法1：计算滚动条宽度并隐藏起来
 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。
 
<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}
 
这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的。在chrome和IE没发现问题
 
方法2：使用三个容器包围起来，不需要计算滚动条的宽度
 该代码最早是在Microsoft博客上看到的，跟我上面的思路差不多，只不过人家里面又加多了一个盒子，将内容限制在盒子里面了。这样子就看不到滚动条同时也可以滚动。 代码如下：
 
 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
 
.element, .outer-container {
  width: 200px;
  height: 200px;
}

.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}

.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.inner-container::-webkit-scrollbar {
  display: none;
}
 
方法3：css隐藏滚动条
 
同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式 chrome 和Safari
 
.element::-webkit-scrollbar { width: 0 !important }
//IE 10+
.element { -ms-overflow-style: none; }
//Firefox
.element { overflow: -moz-scrollbars-none; }