一.概述

今天主要来分享个自己定义viewpagerindicator。效果主要是仿 猫眼电影 顶部的栏目切换。也就是我们常说的indicator,难度简单，为了让滑动时效果更炫酷，我在滑动到左边第一个item或者最右边的item时，加入了滑动到边缘位置后，回弹然后复位的效果（事实上也是非常easy，仅仅要计算好距离就好啦）

大致的效果图就是这样。

大家能够凑合看看（能够看到当滑动到边缘位置的时候有回弹的效果，是不是挺带感的O(∩_∩)O）

二.用法

  1. layout布局
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     tools:context=".MainActivity">
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="50dp"
  11.         android:gravity="center"
  12.         android:background="@color/red">
  14.         <mr_immortalz.com.viewpagerindicator.ViewPagerIndicator
  15.             android:id="@+id/indicator"
  16.             android:layout_width="200dp"
  17.             android:layout_height="36dp"></mr_immortalz.com.viewpagerindicator.ViewPagerIndicator>
  18.     </LinearLayout>
  20.     <android.support.v4.view.ViewPager
  21.         android:id="@+id/vp"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="match_parent"></android.support.v4.view.ViewPager>
  24. </LinearLayout>

2.MainActivity用法

  1. public class MainActivity extends AppCompatActivity {
  2.     private ViewPager viewPager;
  3.     private ViewPagerIndicator indicator;
  4.     private FragmentPagerAdapter mAdapter;
  5.     private List<Fragment> mList;
  6.     private List<String> mDatas;
  7.     private int itemCount = 2;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  14.         viewPager = (ViewPager) findViewById(R.id.vp);
  15.         indicator = (ViewPagerIndicator) findViewById(R.id.indicator);
  16.         mList = new ArrayList<Fragment>();
  17.         for (int i = 0; i < itemCount; i++) {
  18.             Fragment fragment = new MeFragment();
  19.             mList.add(fragment);
  20.         }
  22.         mDatas = new ArrayList<>();
  23.         for (int i = 0; i < itemCount; i++) {
  24.             mDatas.add("i=" + i);
  25.         }
  27.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
  28.             @Override
  29.             public Fragment getItem(int position) {
  30.                 return mList.get(position);
  31.             }
  33.             @Override
  34.             public int getCount() {
  35.                 return mList.size();
  36.             }
  37.         };
  39.         viewPager.setAdapter(mAdapter);
  40.         //将viewpager与indicator绑定
  41.         indicator.setDatas(mDatas);
  42.         indicator.setViewPager(viewPager);
  44.     }
  45. }

3.自己定义ViewpagerIndicator

  1. public class ViewPagerIndicator extends LinearLayout {
  2.     private ViewPager mViewPager;
  4.     private int width;
  5.     private int height;
  6.     private int visibleItemCount = 3;
  7.     private int itemCount = 3;
  9.     //绘制框框
  10.     private Paint paint;
  11.     private float mWidth = 0;
  12.     private float mHeight = 0;
  13.     private float mLeft = 0;
  14.     private float mTop = 0;
  15.     private float radiusX = 10;
  16.     private float radiusY = 10;
  17.     private int mPadding = 8;
  19.     private List<String> mDatas;
  20.     private boolean isSetData = false;
  21.     private Context context;
  22.     private int currentPosition;
  23.     private boolean isAutoSelect = false;//推断是否进行切换
  24.     private float rebounceOffset;
  26.     public ViewPagerIndicator(Context context) {
  27.         super(context);
  28.         this.context = context;
  29.         init();
  30.     }
  32.     public ViewPagerIndicator(Context context, AttributeSet attrs) {
  33.         super(context, attrs);
  34.         this.context = context;
  35.         init();
  36.     }
  38.     public ViewPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
  39.         super(context, attrs, defStyleAttr);
  40.         this.context = context;
  41.         init();
  43.     }
  45.     private void init() {
  46.         this.setBackgroundDrawable(getResources().getDrawable(R.drawable.bg));
  47.         paint = new Paint();
  48.         paint.setStyle(Paint.Style.FILL);
  49.         paint.setColor(getResources().getColor(R.color.white));
  50.         paint.setAntiAlias(true);
  51.     }
  53.     @Override
  54.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  55.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  56.         width = getMeasuredWidth();
  57.         height = getMeasuredHeight();
  58.         mWidth = width / visibleItemCount;
  59.         mHeight = height;
  60.         LogUtil.m("width " + width + "  height " + height);
  61.     }
  63.     @Override
  64.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  65.         LogUtil.m();
  66.         super.onSizeChanged(w, h, oldw, oldh);
  67.         if (isSetData) {
  68.             isSetData = false;
  69.             this.removeAllViews();
  70.             //加入TextView
  71.             for (int i = 0; i < mDatas.size(); i++) {
  72.                 TextView tv = new TextView(context);
  73.                 tv.setPadding(mPadding, mPadding, mPadding, mPadding);
  74.                 tv.setText(mDatas.get(i));
  75.                 LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
  76.                         LayoutParams.MATCH_PARENT);
  77.                 lp.width = width / visibleItemCount;
  78.                 lp.height = height;
  79.                 tv.setGravity(Gravity.CENTER);
  80.                 tv.setTextColor(getResources().getColor(R.color.font_red));
  81.                 tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
  82.                 tv.setLayoutParams(lp);
  83.                 final int finalI = i;
  84.                 tv.setOnClickListener(new OnClickListener() {
  85.                     @Override
  86.                     public void onClick(View v) {
  87.                         if (mViewPager != null) {
  88.                             mViewPager.setCurrentItem(finalI);
  89.                         }
  90.                     }
  91.                 });
  92.                 this.addView(tv);
  93.             }
  94.             setTitleColor();
  95.         }
  97.     }
  99.     @Override
  100.     protected void onFinishInflate() {
  101.         super.onFinishInflate();
  102.     }
  104.     @Override
  105.     protected void onDraw(Canvas canvas) {
  106.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  107.             //drawRoundRect须要的最低API是21
  108.             canvas.drawRoundRect(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding, radiusX, radiusY, paint);
  109.         } else {
  110.             canvas.drawRoundRect(new RectF(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding), radiusX, radiusX, paint);
  111.             //canvas.drawRect(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding, paint);
  112.         }
  114.     }
  116.     @Override
  117.     protected void dispatchDraw(Canvas canvas) {
  118.         //ogUtil.m();
  119.         super.dispatchDraw(canvas);
  120.     }
  122.     public void setViewPager(ViewPager viewpager, int position) {
  123.         this.mViewPager = viewpager;
  124.         this.currentPosition = position;
  125.         if (mViewPager != null) {
  126.             viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  127.                 @Override
  128.                 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  129.                     //当移动的是最左边item
  130.                     if (isAutoSelect && currentPosition == 0) {
  131.                         //滑动手松开时，让最左边（即第一个）item滑动到左边缘位置
  132.                         if (positionOffset > rebounceOffset / 2) {
  133.                             mLeft = (position + (positionOffset - rebounceOffset / 2) * 2) * mWidth;
  134.                         } else if (positionOffset > rebounceOffset / 3 && positionOffset < rebounceOffset / 2) {
  135.                             //让最左边（即第一个）item 向右回弹一部分距离
  136.                             mLeft = (position + (rebounceOffset / 2) - positionOffset) * mWidth * 6 / 12;
  137.                         } else {
  138.                             //让最左边（即最后一个）item 向左回弹到边缘位置
  139.                             mLeft = (position + positionOffset) * mWidth * 6 / 12;
  140.                         }
  141.                         invalidate();
  142.                     } else if (isAutoSelect && currentPosition == itemCount - 1) {
  143.                         //当移动的是最右边（即最后一个）item
  145.                         //滑动手松开时，让最右边（即最后一个）item滑动到右边缘位置
  146.                         if (positionOffset >= rebounceOffset && positionOffset < (1 - (1 - rebounceOffset) / 2)) {
  147.                             //
  148.                             mLeft = (position + positionOffset / (1 - (1 - rebounceOffset) / 2)) * mWidth;
  149.                             //当item数大于visibleItem可见数。本控件(本质LinearLayout)才滚动
  150.                             if (visibleItemCount < itemCount) {
  151.                                 scrollTo((int) (mWidth * positionOffset / (1 - (1 - rebounceOffset) / 2) + (position - visibleItemCount + 1) * mWidth), 0);
  152.                             }
  153.                             if ((mLeft + mWidth) > (getChildCount() * mWidth)) {
  154.                                 //当(mLeft + mWidth)大于最边缘的宽度时，设置
  155.                                 mLeft = (itemCount - 1) * mWidth;
  156.                             }
  157.                         } else if (positionOffset > (1 - (1 - rebounceOffset) / 2) && positionOffset < (1 - (1 - rebounceOffset) / 4)) {
  158.                             //让最右边（即最后一个）item 向左回弹一部分距离
  160.                             //当item数大于visibleItem可见数，且本控件未滚动到指定位置，则设置控件滚动到指定位置
  161.                             if (visibleItemCount < itemCount && getScrollX() != (itemCount - visibleItemCount) * mWidth) {
  162.                                 scrollTo((int) ((itemCount - visibleItemCount) * mWidth), 0);
  163.                             }
  164.                             mLeft = (position + 1) * mWidth - (positionOffset - (1 - (1 - rebounceOffset) / 2)) * mWidth * 7 / 12;
  165.                         } else {
  166.                             //让最右边（即最后一个）item 向右回弹到边缘位置
  168.                             //由于onPageScrolled 最后positionOffset会变成0，所以这里须要推断一下
  169.                             //当positionOffset = 0 时。设置mLeft位置
  170.                             if (positionOffset != 0) {
  171.                                 mLeft = (position + 1) * mWidth - (1.0f - positionOffset) * mWidth * 7 / 12;
  172.                                 if (mLeft > (itemCount - 1) * mWidth) {
  173.                                     mLeft = (itemCount - 1) * mWidth;
  174.                                 }
  175.                             } else {
  176.                                 mLeft = (itemCount - 1) * mWidth;
  177.                             }
  179.                         }
  180.                         invalidate();
  181.                     } else {
  182.                         //当移动的是中间item
  183.                         scrollTo(position, positionOffset);
  184.                         rebounceOffset = positionOffset;
  185.                     }
  186.                     setTitleColor();
  187.                 }
  189.                 @Override
  190.                 public void onPageSelected(int position) {
  191.                     LogUtil.m("position " + position);
  192.                     currentPosition = position;
  193.                 }
  195.                 @Override
  196.                 public void onPageScrollStateChanged(int state) {
  197.                     LogUtil.m("state " + state);
  198.                     if (state == 2) {
  199.                         //当state = 2时，表示手松开。viewpager自己主动滑动
  200.                         isAutoSelect = true;
  201.                     }
  202.                     if (state == 0) {
  203.                         //当state = 0时，表示viewpager滑动停止
  204.                         isAutoSelect = false;
  205.                     }
  206.                 }
  207.             });
  208.         }
  209.     }
  211.     public void setViewPager(ViewPager viewpager) {
  212.         setViewPager(viewpager, 0);
  213.     }
  215.     /**
  216.      * 正常滑动
  217.      * @param position
  218.      * @param positionOffset
  219.      */
  220.     private void scrollTo(int position, float positionOffset) {
  221.         if (visibleItemCount < itemCount) {
  222.             if (positionOffset > 0 && position > (visibleItemCount - 2)) {
  223.                 this.scrollTo((int) (mWidth * positionOffset + (position - visibleItemCount + 1) * mWidth), 0);
  224.             }
  225.         }
  226.         mLeft = (position + positionOffset) * mWidth;
  227.         invalidate();
  228.     }
  230.     /**
  231.      * 设置字体颜色
  232.      */
  233.     private void setTitleColor() {
  234.         if (getChildCount() > 0) {
  235.             for (int i = 0; i < getChildCount(); i++) {
  236.                 if (i == currentPosition) {
  237.                     ((TextView) getChildAt(currentPosition)).setTextColor(getResources().getColor(R.color.font_red));
  238.                 } else {
  239.                     ((TextView) getChildAt(i)).setTextColor(getResources().getColor(R.color.font_white));
  240.                 }
  241.             }
  242.         }
  243.     }
  245.     /**
  246.      * 设置内容数据
  247.      *
  248.      * @param mDatas
  249.      */
  250.     public void setDatas(List<String> mDatas) {
  251.         this.isSetData = true;
  252.         this.mDatas = mDatas;
  253.         this.itemCount = mDatas.size();
  254.         if (itemCount < visibleItemCount) {
  255.             visibleItemCount = itemCount;
  256.         }
  258.     }
  259. }

三.代码分析

非常明显，核心代码在ViewPagerIndicator中。由于代码中已经对每一个函数方法给出了凝视。以下说下大体思路。

1.首先init()。onMeasure中对paint，width,height等不可缺少的数据进行获取。

2.由于整个indicator是继承自linearlayout，对于里面的文字展示，用textview来显示。由于不知道用户使用的时候究竟有多少个item。所以在setDatas()方法中对textview数目进行绑定。然后在onSizeChanged中动态生成须要的textview数目（isSetData用来控制是否绑定了数据。绑定了的话。须要将之前所有生成的所有清空）

  1. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  2.         LogUtil.m();
  3.         super.onSizeChanged(w, h, oldw, oldh);
  4.         if (isSetData) {
  5.             isSetData = false;
  6.             this.removeAllViews();
  7.             //加入TextView
  8.             for (int i = 0; i < mDatas.size(); i++) {
  9.                 TextView tv = new TextView(context);
  10.                 tv.setPadding(mPadding, mPadding, mPadding, mPadding);
  11.                 tv.setText(mDatas.get(i));
  12.                 LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
  13.                         LayoutParams.MATCH_PARENT);
  14.                 lp.width = width / visibleItemCount;
  15.                 lp.height = height;
  16.                 tv.setGravity(Gravity.CENTER);
  17.                 tv.setTextColor(getResources().getColor(R.color.font_red));
  18.                 tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
  19.                 tv.setLayoutParams(lp);
  20.                 final int finalI = i;
  21.                 tv.setOnClickListener(new OnClickListener() {
  22.                     @Override
  23.                     public void onClick(View v) {
  24.                         if (mViewPager != null) {
  25.                             mViewPager.setCurrentItem(finalI);
  26.                         }
  27.                     }
  28.                 });
  29.                 this.addView(tv);
  30.             }
  31.             setTitleColor();
  32.         }
  34.     }

仅仅所以在onsizechanged中动态加入，是由于该方法会在ondraw前，onMeasure方法后回调，这样就保证我们能获取到须要的width,height。



3.Ok,如今获取到须要绘制的数目后接下来就是绘制白色背景框框啦。

  1. protected void onDraw(Canvas canvas) {
  2.         LogUtil.m();
  3.         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  4.             //drawRoundRect须要的最低API是21
  5.             canvas.drawRoundRect(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding, radiusX, radiusY, paint);
  6.         } else {
  7.             canvas.drawRoundRect(new RectF(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding), radiusX, radiusX, paint);
  8.             //canvas.drawRect(mLeft + mPadding, mTop + mPadding, mLeft + mWidth - mPadding, mTop + mHeight - mPadding, paint);
  9.         }
  11.     }

非常好理解。不解释`(∩_∩)′

4.接下来，最最关键的就是setViewPager()这种方法。

为了方便理解，大家能够看看

onPageScrolled（页面滚动时回调）

onPageSelected（滑动松手后回调，在一个滑动流程中仅仅会回调一次）

onPageScrollStateChanged（在一个滑动流程中会回调三次。详细代表含义能够看图中标注）

这三个方法滑动时。详细回调顺序。

从第一个item向右滑动到第二个item



从第二个item滑动到第一个item（不管左滑还是右滑回调流程都一致）



知道了上面我们就应该非常好理解了。

在onPageSelected中记录currentPosition的值。

在onPageScrollStateChanged中推断何时松开手，方便后面在松开手会对滑动进行处理

在onPageScrolled中进行滑动处理。

以下在详细说说onPageScrolled。

onPageScrolled中也有三个推断

1.处于最左边item且手滑动松开

2.处于最右边item且手滑动松开

3.其它item不管手是否滑动松开（这里用rebounceOffset记录手松开时，已经拖动的比例positionOffset）

  1. else {
  2.                         //当移动的是中间item
  3.                         scrollTo(position, positionOffset);
  4.                         rebounceOffset = positionOffset;
  5.                     }
  1. private void scrollTo(int position, float positionOffset) {
  2.         //item数量大于可见item，linearlayout才滑动
  3.         if (visibleItemCount < itemCount) {
  4.             if (positionOffset > 0 && position > (visibleItemCount - 2)) {
  5.                 this.scrollTo((int) (mWidth * positionOffset + (position - visibleItemCount + 1) * mWidth), 0);
  6.             }
  7.         }
  8.         mLeft = (position + positionOffset) * mWidth;
  9.         invalidate();
  10.     }

分析第一种情况。

为了实现回弹。

在松手后的（positionOffset-0 ） 的时间段呢。分成三部分

看图 

  1. if (isAutoSelect && currentPosition == 0) {
  2.                         //滑动手松开时，让最左边（即第一个）item滑动到左边缘位置
  3.                         if (positionOffset > rebounceOffset / 2) {
  4.                             mLeft = (position + (positionOffset - rebounceOffset / 2) * 2) * mWidth;
  5.                         } else if (positionOffset > rebounceOffset / 3 && positionOffset < rebounceOffset / 2) {
  6.                             //让最左边（即第一个）item 向右回弹一部分距离
  7.                             mLeft = (position + (rebounceOffset / 2) - positionOffset) * mWidth * 6 / 12;
  8.                         } else {
  9.                             //让最左边（即最后一个）item 向左回弹到边缘位置
  10.                             mLeft = (position + positionOffset) * mWidth * 6 / 12;
  11.                         }
  12.                         invalidate();
  13.                     }

分析另外一种情况（剩余时间（positionOffset - 1 ）也是分成了三部分。一部分回到边缘，一部分偏移。一部分用于复位。与第一种情况类似，不再贴图），当item滑向最有边缘时，与第一种情况不同的是，Linearlayout是须要向左移动的。所以liearlayout向左移动了X，我们绘制的白色边框须要向右移动X。才干保证。视觉上看起来白色边框没有动，动的是。我们的Linearlayout(不知道大家能理解不，可能我说的有点不太好理解，用纸好好绘制下简单理解些`(∩_∩)′)

  1.  else if (isAutoSelect && currentPosition == itemCount - 1) {
  2.                         //当移动的是最右边（即最后一个）item
  4.                         //滑动手松开时。让最右边（即最后一个）item滑动到右边缘位置
  5.                         if (positionOffset >= rebounceOffset && positionOffset < (1 - (1 - rebounceOffset) / 2)) {
  6.                             //
  7.                             mLeft = (position + positionOffset / (1 - (1 - rebounceOffset) / 2)) * mWidth;
  8.                             //当item数大于visibleItem可见数。本控件(本质LinearLayout)才滚动
  9.                             if (visibleItemCount < itemCount) {
  10.                                 scrollTo((int) (mWidth * positionOffset / (1 - (1 - rebounceOffset) / 2) + (position - visibleItemCount + 1) * mWidth), 0);
  11.                             }
  12.                             if ((mLeft + mWidth) > (getChildCount() * mWidth)) {
  13.                                 //当(mLeft + mWidth)大于最边缘的宽度时，设置
  14.                                 mLeft = (itemCount - 1) * mWidth;
  15.                             }
  16.                         } else if (positionOffset > (1 - (1 - rebounceOffset) / 2) && positionOffset < (1 - (1 - rebounceOffset) / 4)) {
  17.                             //让最右边（即最后一个）item 向左回弹一部分距离
  19.                             //当item数大于visibleItem可见数。且本控件未滚动到指定位置。则设置控件滚动到指定位置
  20.                             if (visibleItemCount < itemCount && getScrollX() != (itemCount - visibleItemCount) * mWidth) {
  21.                                 scrollTo((int) ((itemCount - visibleItemCount) * mWidth), 0);
  22.                             }
  23.                             mLeft = (position + 1) * mWidth - (positionOffset - (1 - (1 - rebounceOffset) / 2)) * mWidth * 7 / 12;
  24.                         }

OK。三种情况都分析完成。

最后我们的控件也算是大功告成啦`(∩_∩)′

源代码下载地址 https://github.com/ImmortalZ/ViewPagerIndicator

欢迎star。fork！

`(∩_∩)′

自己定义ViewpagerIndicator （仿猫眼，加入边缘回弹滚动效果）的更多相关文章

  1. iOS仿UC浏览器顶部频道滚动效果

    很喜欢用UC浏览器上网,当然不是给UC打广告,里面有很多酷炫的效果,值的学习,这次分享的是频道滚动的效果.动画效果如下: 实现的这个效果的关键是绘制,重写顶部Label的drawRect方法 gith ...

  2. 模仿猫眼电影App一个动画效果

    看真正的猫眼效果图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzIxMDYyMA==/font/5a6L5L2T/fontsize/400/f ...

  3. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  4. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  5. 它们的定义TextView使之具有跑马灯的效果

    一.引入问题 使用通用textview快乐效应,焦点事件不启动滚动,button目前的焦点事件,但丑,因此,需要定制TextView 天生焦点 个textview FocusedTextView.ja ...

  6. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  7. JS 仿腾讯发表微博的效果

    JS 仿腾讯发表微博的效果 最近2天研究了下 腾讯发表微博的效果 特此来分享下,效果如下: 在此分享前 来谈谈本人编写代码的习惯,很多人会问我既然用的是jquery框架 为什么写的组件不用Jquery ...

  8. jQuery练手：仿新浪微博图片文字列表淡进淡出上下滚动效果

    1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下 ...

  9. iOS仿支付宝首页的刷新布局效果

    代码地址如下:http://www.demodashi.com/demo/12753.html XYAlipayRefreshDemo 运行效果 动画效果分析 1.UI需要变动,向上滑动的时候,顶部部 ...

随机推荐

  1. SpringBoot 2.x （1）：手动创建项目与自动创建项目

    SpringBoot 2.x基于Spring Framework 5.x 环境需求如下: JDK1.8或以上 Maven3.2或以上 这里我使用的是Eclipse,IDEA这个工具很强大,但不习惯它 ...

  2. Chromium浏览器编译成功庆祝

     1.什么是Chromium     Chromium 是Google公司的开源项目     Google浏览器  最新版360浏览器 都是在Chromium的基础上重新编译的. 2.什么是双核浏览器 ...

  3. CommHelper

    18位流水号: public static string GenerateTransId(int i) { string transId = DateTime.Now.ToString("y ...

  4. Navicat Premium 12 破解方法

    基本安装下一步下一步,破解方法参考:地址

  5. oracle数据库跨库查询

    create public database link mylink connect to orclname identified by orclpasswd using 'ORCL'; drop p ...

  6. Squid 正向代理

    实现通过特定设备对特定的网址访问加速 使用squid 正向代理 实现,区别于反向代理,两者区别的根本在于作为中转的服务器在一个完整的请求中是代表客户端还是代表服务器. 服务端设置 1.安装程序包(推荐 ...

  7. axios方法封装

    axios方法封装 一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:     五.封装后的方法的使用 1.在main.js文件里引用之前写好的文件,我的命名为htt ...

  8. Description Resource Path Location Type Missing artifact com.********:framework:jar:1.0.2 pom.xml /项目名 line **** Maven Dependency Problem

    问题具体描述如下图所示: 对于该问题本人是这么解决的. 在window下[Preferences]目录找到[Maven]下的[usersetting] 查看local repository 里面的路径 ...

  9. JAVA基础——集合类汇总

    一.集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  10. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...