很久前学写的一个做医院排行和分类归纳的小程序,今天就把其中的一部分内容分享出来。
先上效果图给大家看看:
可以进行前三排名,还可进行综合医院和三甲医院排名。
###当然你要是活学活用的话可以演变为很多例子,绝对够你开发用了。
下面开始正文介绍:
###第一、列表怎么做
列表我们参照小程序的数据绑定和列表渲染来写;
<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”,】了吧。根据你这里设置的数值,来让他灵活展示几星几星。
小伙伴们,看了这些你明白了思路吧?
欲知后事如何,且听下周分解。
————惯例,如有疑问可在评论回复,我会及时回答的