小程序给内容做列表排名和信息分类归纳

很久前学写的一个做医院排行和分类归纳的小程序，今天就把其中的一部分内容分享出来。
先上效果图给大家看看：

可以进行前三排名，还可进行综合医院和三甲医院排名。
###当然你要是活学活用的话可以演变为很多例子，绝对够你开发用了。
下面开始正文介绍：
###第一、列表怎么做

列表我们参照小程序的数据绑定和列表渲染来写；

<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”,】了吧。根据你这里设置的数值，来让他灵活展示几星几星。

小伙伴们，看了这些你明白了思路吧？

欲知后事如何，且听下周分解。

————惯例，如有疑问可在评论回复，我会及时回答的

转载于:https://www.cnblogs.com/xiaobeiju/p/10224136.html