很久前学写的一个做医院排行和分类归纳的小程序，今天就把其中的一部分内容分享出来。

先上效果图给大家看看：



可以进行前三排名，还可进行综合医院和三甲医院排名。

###当然你要是活学活用的话可以演变为很多例子，绝对够你开发用了。

下面开始正文介绍：

###第一、列表怎么做
列表我们参照小程序的数据绑定和列表渲染来写；
<block wx:for="{{searchHospitalList}}">

用一个wx:for把数据列表内容循环罗列出来。那么内容怎么排序呢？我们用ID来进行排序。id++进行递增。这样的目的是在你点击每一个列表内容和对应序号找到它的详情页。如果说id打架不习惯，那你也可以用index++代替。

这种写法基于我们的数据库怎么写的，下面列上部分我的数据表内容：
var data = [{
  "searchType": {
    "yy": ["全部", "综合医院", "专科医院"],
    "ks": ["全部","男科", "妇科", "整形","内科","外科"]
  },
  "hospital":[
    {
      "ID": 0,
      "searchType": "综合医院",
      "searchKs": "内科",
      "content": "123",
      "show": false,
      "name": "郑州大学第一附属医院",
      "img": "../../resources/hos_00.png",
      "star": "5",
      "score": "学科声誉：90　科研学术：13.09　总：93.99",
      "tips": ["综合医院", "三甲医院"],
      "hos_type": "公立医院",
      "hos_level": "三级甲等",
      "hos_phone": "0371118114",
      "hos_address": "郑州市建设东路1号",
      "hos_detail": "郑州大学第一附属医院始建于1928年9月，其前身为原国立河南大学医学院附设医院。1958年从开封迁址郑州，更名为河南医学院第一附属医院。1985年更名为河南医科大学第一附属医院。2000年原郑州大学、郑州工业大学、河南医科大学三校合并，医院正式命名为郑州大学第一附属医院。2012年成为省部共建医院。2017年临床医学成为国家“双一流”建设学科。医院是集医疗、教学、科研、预防、保健、康复为一体，具有较强救治能力、较高科研水平和国际交流能力的三级甲等医院，先后被评为全国文明单位、国家级“爱婴医院”、全国“百佳医院”、中国医院信息化建设先进单位、全国县级医院帮扶示范基地、中国PTC突出贡献团队奖、全国优质护理服务优秀医院、全国医院文化建设先进单位等荣誉称号。",
      "hos_doctor": [
        { "name": "常连胜", "avatar": "../../resources/zj00_01.png", "ks": "泌尿外科五病区", "job": "主任医师、教授" },
        { "name": "边爱平", "avatar": "../../resources/zj00_02.png", "ks": "妇科一", "job": "主任医师、教授" }
      ],
      "hos_ks": ["药学","骨科","妇科","专科护理","心血管内科","心脏外科","神经外科"],
      "hos_zdks": "心脏外科，骨科"
    },
    { 
      "ID": 1,
      "searchType":"专科医院",
      "searchKs":"男科",
      "content": "123", 
      "show": false ,
      "name":"郑州博大泌尿外科医院",
      "img":"../../resources/hos_01.png",
      "star":"4",
      "score":"学科声誉：84　科研学术：11.09　总：90.12",
      "tips":["专科医院","三甲医院"],
      "hos_type":"私立医院",
      "hos_level":"三级甲等",
      "hos_phone":"037165399999",
      "hos_address":"郑州市金水区黄河路131号",
      "hos_detail":"博大，专业泌尿外科医院知名品牌。郑州博大泌尿外科医院成立于2007年，是一家集科研、医疗、保健为一体，专注于男性常见疾病诊疗的专业化泌尿外科医院。医院坐落于郑州市金水区黄河路未来路交叉口，向西50米，紧邻中州大道高架桥，交通方便。",
      "hos_doctor":[
        { "name": "宋高远", "avatar":"../../resources/zj_01.png","ks":"男科","job":"副主任医师"},
        { "name": "韩泽惠", "avatar": "../../resources/zj_02.png", "ks": "男科", "job": "执业医师" }
      ],
      "hos_ks": ["前列腺科", "性功能障碍科", "生殖器畸形", "泌尿感染"],
      "hos_zdks":"泌尿外科，男科"
    },
    {
      "ID": 2,
      "searchType": "综合医院",
      "searchKs": "外科",
      "content": "123",
      "show": false,
      "name": "河南省人民医院",
      "img": "../../resources/hos_05.png",
      "star": "4",
      "score": "学科声誉：78　科研学术：7.67　总：83.19",
      "tips": ["综合医院", "三甲医院"],
      "hos_type": "公立医院",
      "hos_level": "三级甲等",
      "hos_phone": "4000371818",
      "hos_address": "郑州市纬五路7号",
      "hos_detail": "河南省人民医院前身是中华基督教内地会1904年创办的开封“福音医院”，1950年更名为“河南省人民医院”，1955年随省政府迁址郑州，2010年增名“郑州大学人民医院”，2012年被确定为“部省共建”医院。省医人将紧紧围绕“人才、学科、互联智慧健康服务”工作主线，全心全意服务人民健康，全面提升医疗、教学、科研、管理、服务水平，不断强化核心竞争力和创新力，说到做到，做到做好，做好做持续，彰显社会责任担当，铸造百年品牌形象，续写省医改革发展崭新篇章。",
      "hos_doctor": [
        { "name": "孙建军", "avatar": "../../resources/zj05_01.png", "ks": "肝移植病区", "job": "副主任医师" },
        { "name": "白莹莹", "avatar": "../../resources/zj05_02.png", "ks": "妇科一", "job": "主治医师" }
      ],
      "hos_ks": ["心血管内科", "内分泌科", "呼吸内科", "肾内科", "医学影像科", "临床护理", "心血管外科", "神经内科", "眼科", "感染性疾病科","急诊医学科"],
      "hos_zdks": "呼吸内科，心血管外科"
    },
    {
      "ID": 3,
      "searchType": "综合医院",
      "searchKs": "内科",
      "content": "123",
      "show": false,
      "name": "郑州人民医院",
      "img": "../../resources/hos_04.png",
      "star": "4",
      "score": "学科声誉：83　科研学术：8.44　总：83.58",
      "tips": ["综合医院", "三甲医院"],
      "hos_type": "公立医院",
      "hos_level": "三级甲等",
      "hos_phone": "037165390000",

根据这样的ID顺序来进行第123456789的排名，排名怎么写？兄弟，你可以随便写。但是要在wx:for里面实现，我建议这样写：
<text>{{index+1}}</text>

这可以做排名递加递减。
###第二、如何做分类归纳
上面的代码你也看到了，在***tips里面有数组存储[“综合医院”, “三甲医院”]***等等，那么在代码里怎么实现呢？
<view class='hosptial-tips' >
  <!-- <text class='tips-zh'>综合医院</text> -->
  <text class='tips-sj' wx:for="{{item.tips}}" wx:for-item="tips"  wx:key="tips">{{tips}}</text>
</view>

这是我们把他的类别罗列出来，这样的tips是固定的，存储并读取出来不会发生变化。

在分类搜索中就运用到我们的数据表中的分类了：
var data = [{
  "searchType": {
    "yy": ["全部", "综合医院", "专科医院"],
    "ks": ["全部","男科", "妇科", "整形","内科","外科"]
  },

对，就是这部分，全部的大类分为这些，在下拉列表中实现分类



下拉列表在怎么写？友情提示***picker组件***。在本文里暂时不做介绍。

###如何写星星？

最笨的方法就是先写所有的星星列表：
<view class='hospital-star'>
  <image src="../../resources/star_5.png" wx:if="{{item.star == 5}}"/>
  <image src="../../resources/star_4.png" wx:if="{{item.star == 4}}"/>
  <image src="../../resources/star_3.png" wx:if="{{item.star == 3}}"/>
  <image src="../../resources/star_2.png" wx:if="{{item.star == 2}}"/>
  <image src="../../resources/star_1.png" wx:if="{{item.star == 1}}"/>
</view>

做一个【wx:if="{{item.star == ？}}】的判断。问号等于什么呢？问号的内容也是在数据表中的。
"hospital":[
    {
      "ID": 0,
      "searchType": "综合医院",
      "searchKs": "内科",
      "content": "123",
      "show": false,
      "name": "郑州大学第一附属医院",
      "img": "../../resources/hos_00.png",
      "star": "5",
      "score": "学科声誉：90　科研学术：13.09　总：93.99",
      "tips": ["综合医院", "三甲医院"],
      "hos_type": "公立医院",
      "hos_level": "三级甲等",
      "hos_phone": "0371118114",
      "hos_address": "郑州市建设东路1号",

看到那个【 “star”: “5”,】了吧。根据你这里设置的数值，来让他灵活展示几星几星。
小伙伴们，看了这些你明白了思路吧？
欲知后事如何，且听下周分解。
————惯例，如有疑问可在评论回复，我会及时回答的

前言：对于这个效果的设想，也是因为业务驱使，完全不要以为我心中自有定数。

对于这个标题，首先我们仔细想想，抖音这种视频列表和一般微博的图片列表，下拉上划是有一定的区别的。微博的图片上拉下划是很快速地划动浏览列表中的图片的，但是视频不一样，每个视频是需要用户停留看一会时间的视频才会触发上拉下划事件的，so，这样的需求是诞生了。我们在app中，铺天盖地的视频在我们手机中滑动着，腾讯爸爸的微信生态早已心想吞并整个移动生态。时尚最时尚的小程序一出手，就立马掀起了翻天覆地的潮水，今天给大家分享一下如何在小程序里做成类似抖音视频那种上拉下划得样式效果，先上效果图。

                                                  

是不是很炫酷呢，之前产品要做成这样的效果，我其实是没底的，但后来从动画角度，从js角度都做了各种尝试，修改太多次的数据结构，变量的抽离。一开始尝试了一整天，因为无法弄通如何将每个列表项的高度做成动态变化，并循环渲染，差点真做成了类似于抖音视频列表那种等高的下拉效果，后来等手头上的工作都完成后，在合适的状态下忽然想到了一个办法来解决，有一种醍醐灌顶之妙。说实在，从无到有真的很费劲！不怕笑话，最初的模型是这个样子的。

                                              

无添加，无污染，无公害的绿色食品。

每块的内容呢我都是做了个view模块，大家可以自由发挥随意填充，最终版的源代码中，我做了很多的注释，只要是认识26个英文字母的程序员都可以看得懂，看不懂的都是没耐心的，这里我我将代码的地址贴上，大家可以参考参考。

https://gitee.com/lrxu/minipro.git

不足：滑动到顶部和滑动到底部的判断，我做得不是很到位，大家可以评论给点建议。后面会将该页面做成与业务没有任何联系的组件，个人不建议刚做出来一个效果就立马做成组件，因为很多业务场景还没有完全适应，很多变量数据结构的总结很不成熟，建议使用一段时间后，大家再可以尝试着去试试。

篇尾语(与内容无关)：

错过，是在不合适的场合草草相遇，是在合不适的时间里尴尬收场。

相遇，是在合适的地点悄悄遇上，是在合适的日子里跌跌撞撞。

使用  RecyclerView  做点餐列表联动页面

版权声明：本文为博主原创文章，未经博主允许不得转载。
最近刚换了工作，来到一家做了11年餐饮软件管理的公司，开发平板端点餐安卓端原生app。因为之前一直没做过类似的软件，对于我来说是一个全新的开始，所以打算写博客记录下来我从头开发的整个过程。

平板设置横屏属性就可以横屏在平板上显示，不用担心切换横竖屏会导致activity的生命周期改变。代码如下：

android:launchMode="singleTask" android:screenOrientation="landscape"

之后就开始做点餐界面，因为主界面就是专门用来点餐的，所以直接开始做点餐界面。产品经理说整个app是不需要联网就可以进行的，所有的资料是从后台下载下来之后存储下来，然后再取出来。之前一直没涉及到数据库的知识，所以这也是我学习的重点。

最先开始呢就是先做二级列表菜单页面，我用的是 RecyclerView ，很多知识可以从鸿洋的博客学习，我做的这个很大程度上也是从上面学习的 
http://blog.csdn.net/lmj623565791/article/details/45059587 

还有一部分是从 
http://blog.csdn.net/w804518214/article/details/51570975 

上面学习的，不过很大程度上改进了，根据我的需求在他的基础上做了很多改变。



效果图来看不复杂内容并没多少，值得介绍一下的知识点也就下面几个吧

左右列表滑动时联动
添加商品时的抛物线动画
底部弹出购物车清单
数据的同步
左右列表联动

联动主要有两个效果 

- 左侧列表点击选择分类，右侧列表滑动到对应分类 

- 右侧列表滑动过程中左侧列表高亮的分类跟随变化

第一个效果简单，左侧列表item添加点击事件，事件中调用右侧列表的setSelection(int positon) 方法。

第二个效果要给右侧列表添加ScrollListener，根据列表中显示的第一条数据设置左侧选中的分类



listView.setOnScrollListener(new RecyclerView.OnScrollListener(){

            public void onScrollStateChanged(RecyclerView view, int scrollState) {

            }

            public void onScrolled(RecyclerView view, int firstVisibleItem, int visibleItemCount) {
                //根据firstVisibleItem获取分类ID，根据分类id获取左侧要选中的位置
                GoodsItem item = dataList.get(firstVisibleItem);
                if(typeAdapter.selectTypeId != item.typeId) {
                    typeAdapter.selectTypeId = item.typeId;
                    typeAdapter.notifyDataSetChanged();
                    //左侧列表是个RecyclerView 所以使用smoothScrollToPosition(int position) 使当对应position的item可以滚动显示出来
                    rvType.smoothScrollToPosition(getSelectedGroupPosition(item.typeId));
                }
            }
        });

添加商品的动画

添加商品一共有三个动画 

- 当商品从0到1 旋转左移显示出减号按钮 

- 当商品从1到0 减号按钮旋转右移消失 

- 添加商品时抛物线动画添加到购物车图标

前两个动画很简单可以分解成三个补间动画 旋转、平移、透明度。 



/**
         * 点击加号显示减号的动画
         * @return
         */
        private Animation getShowAnimation(){
            AnimationSet set = new AnimationSet(true);
            RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
            set.addAnimation(rotate);
            TranslateAnimation translate = new TranslateAnimation(
                    TranslateAnimation.RELATIVE_TO_SELF,2f
                    ,TranslateAnimation.RELATIVE_TO_SELF,0
                    ,TranslateAnimation.RELATIVE_TO_SELF,0
                    ,TranslateAnimation.RELATIVE_TO_SELF,0);
            set.addAnimation(translate);
            AlphaAnimation alpha = new AlphaAnimation(0,1);
            set.addAnimation(alpha);
            set.setDuration(500);
            return set;
        }

        /**
         * 隐藏减号的动画
         * @return
         */
        private Animation getHiddenAnimation(){
            AnimationSet set = new AnimationSet(true);
            RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
            set.addAnimation(rotate);
            TranslateAnimation translate = new TranslateAnimation(
                    TranslateAnimation.RELATIVE_TO_SELF,0
                    ,TranslateAnimation.RELATIVE_TO_SELF,2f
                    ,TranslateAnimation.RELATIVE_TO_SELF,0
                    ,TranslateAnimation.RELATIVE_TO_SELF,0);
            set.addAnimation(translate);
            AlphaAnimation alpha = new AlphaAnimation(1,0);
            set.addAnimation(alpha);
            set.setDuration(500);
            return set;
        }
    }

抛物线动画和上面的差不多可以分解成两个平移动画,不过两个平移动画的差值器一个线性一个加速而已，因为动画界面跨度比较大所以需要在根部局内写，不能写在列表的item中(这样会显示不全)。 

代码中的anim_mask_layout 即为整个布局文件的根布局，这里是一个RelativeLayout

实现过程 

1、首先点击加号图标，拿到控件在屏幕上的绝对坐标，回调activity显示动画



 int[] loc = new int[2];
    v.getLocationInWindow(loc);
    activity.playAnimation(loc);

2、创建动画的控件并添加到根部局并在动画结束后移除动画view




    public void playAnimation(int[] start_location){
        ImageView img = new ImageView(this);
        img.setImageResource(R.drawable.button_add);
        setAnim(img,start_location);
    }
    //创建动画 平移动画直接传递偏移量 
    private Animation createAnim(int startX,int startY){
        int[] des = new int[2];
        imgCart.getLocationInWindow(des);

        AnimationSet set = new AnimationSet(false);

        Animation translationX = new TranslateAnimation(0, des[0]-startX, 0, 0);
        //线性插值器 默认就是线性
        translationX.setInterpolator(new LinearInterpolator());
        Animation translationY = new TranslateAnimation(0, 0, 0, des[1]-startY);
        //设置加速插值器
        translationY.setInterpolator(new AccelerateInterpolator());
        Animation alpha = new AlphaAnimation(1,0.5f);
        set.addAnimation(translationX);
        set.addAnimation(translationY);
        set.addAnimation(alpha);
        set.setDuration(500);

        return set;
    }
    //计算动画view在根部局中的坐标 添加到根部局中
    private void addViewToAnimLayout(final ViewGroup vg, final View view,
                                     int[] location) {

        int x = location[0];
        int y = location[1];
        int[] loc = new int[2];
        vg.getLocationInWindow(loc);
        view.setX(x);
        view.setY(y-loc[1]);
        vg.addView(view);
    }
    //设置动画结束移除动画view 
    private void setAnim(final View v, int[] start_location) {

        addViewToAnimLayout(anim_mask_layout, v, start_location);
        Animation set = createAnim(start_location[0],start_location[1]);
        set.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(final Animation animation) {
                //直接remove可能会因为界面仍在绘制中成而报错
                mHanlder.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        anim_mask_layout.removeView(v);
                    }
                },100);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        v.startAnimation(set);
    }


底部弹出购物车清单

底部弹出的效果大家一定都很熟悉了，几回每个项目中都会用的到，官方没有提供简单的控件实现，一般都需要自己写，不过要做到简单流畅，便于移植推荐使用第三方库，这里向大家推荐一个

bottomsheet

集成简单，效果多样这里简单介绍一下使用方法

集成




 compile 'com.flipboard:bottomsheet-core:1.5.1'

xml中使用BottomSheetLayout包裹弹出view时候的背景布局，BottomSheetLayout继承自帧布局



<com.flipboard.bottomsheet.BottomSheetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bottomSheetLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="100dp"
            android:id="@+id/typeRecyclerView"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

        <se.emilsjolander.stickylistheaders.StickyListHeadersListView
            android:layout_width="match_parent"
            android:background="#fff"
            android:id="@+id/itemListView"
            android:layout_height="match_parent">
        </se.emilsjolander.stickylistheaders.StickyListHeadersListView>
    </LinearLayout>
</com.flipboard.bottomsheet.BottomSheetLayout>

代码中使用很简单



 //弹出View  bottomSheet即是要弹出的view
    bottomSheetLayout.showWithSheetView(bottomSheet);

    //代码隐藏view (点击弹出view以外的地方可以隐藏弹出的view，向下滑动也可以）
    bottomSheetLayout.dismissSheet();

数据的同步

同步数据，控制界面刷新应该是新手最容易绕弯的地方了，其实只要仔细一点也不难，这里简单提供一种思路(并不一定适合你的项目).



 //商品列表
    private ArrayList<GoodsItem> dataList;
    //分类列表
    private ArrayList<GoodsItem> typeList;
    //已选择的商品
    private SparseArray<GoodsItem> selectedList;
    //用于记录每个分组选择的数目
    private SparseIntArray groupSelect;


SparseArray这个类其实就是 HashMap< Integer,Object >

不过SparseArray既可以根据key查找Value，也可以根据位置查找value，性能比HashMap高，是官方推荐的替代类， 

同样SparseIntArray 其实是HashMap< Integer,Integer> 的替代者。

Activity里实现了下面几个方法,用于数据统一管理 

列表中显示的商品购买数量统一从activity获取,商品的加减统一调用Activity的方法然后notifiDatasetChanged，由于代码不少具体的还是看源码吧



 /**
     * Item代表商品的购买数量加一
     * @param item
     * @param refreshGoodList 是否刷新商品list
     */
    public void add(GoodsItem item,boolean refreshGoodList){

        int groupCount = groupSelect.get(item.typeId);
        if(groupCount==0){
            groupSelect.append(item.typeId,1);
        }else{
            groupSelect.append(item.typeId,++groupCount);
        }

        GoodsItem temp = selectedList.get(item.id);
        if(temp==null){
            item.count=1;
            selectedList.append(item.id,item);
        }else{
            temp.count++;
        }
        update(refreshGoodList);
    }
    /**
     * Item商品的购买数量减一
     * @param item
     * @param refreshGoodList 是否刷新商品list
     */
    public void remove(GoodsItem item,boolean refreshGoodList){

        int groupCount = groupSelect.get(item.typeId);
        if(groupCount==1){
            groupSelect.delete(item.typeId);
        }else if(groupCount>1){
            groupSelect.append(item.typeId,--groupCount);
        }

        GoodsItem temp = selectedList.get(item.id);
        if(temp!=null){
            if(temp.count<2){
                selectedList.remove(item.id);
            }else{
                item.count--;
            }
        }
        update(refreshGoodList);
    }

    /**
     * 刷新界面 总价、购买数量等
     * @param refreshGoodList 是否刷新商品list
     */
    private void update(boolean refreshGoodList){
        ...
    }

    //根据商品id获取当前商品的采购数量
    public int getSelectedItemCountById(int id){
        GoodsItem temp = selectedList.get(id);
        if(temp==null){
            return 0;
        }
        return temp.count;
    }
    //根据类别Id获取属于当前类别的数量
    public int getSelectedGroupCountByTypeId(int typeId){
        return groupSelect.get(typeId);
    }


这个页面改动的地方不是很多，但是我还是做了好几天的时间才做出来，左右列表都是用的 RecyclerView 做的，需要匹配的地方有很。

用C#做图片轮播效果
                                        老帅
   在C#中做图片轮播效果，不借助第三方控件，也是可以实现的。使用PictureBox作为图片展示容器就可以。但是图片列表放在什么地方，如何加载，需要考虑一下！

   1.首先排除ImageList
   因为ImageList中的图片尺寸有限制，最大尺寸为256*256，而我们要显示的图片往往尺寸很大，并且不规则。
   
   2.考虑把图片作为资源文件使用
   

   3.用PictureBox加载图片资源   
    this.pictureBox1.Image = global::YourApp.Properties.Resources._1;
   
   4.用定时器轮番加载多个图片资源