实验三 校园新闻小程序样式与布局应用实验.docx

《实验三 校园新闻小程序样式与布局应用实验.docx》由会员分享，可在线阅读，更多相关《实验三 校园新闻小程序样式与布局应用实验.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验三 校园新闻小程序样式与布局应用实验实验目的：（1）掌握小程序常用组件的属性以及用法。（2）熟练掌握flex布局。（3）具备设计美观小程序界面的能力。实验内容：（1）对校园新闻项目进行重新布局，要求使用Flex布局，合理应用各种组件。（2）首页顶部设计具有三张及以上的banner图，要求自动轮播。（3）意见反馈页面设计，表单组件有标题、日期、姓名、性别等，并实现模拟提交。实验设备：开发者工具由 index.wxml X:三 口pages index 田 index.wxml 京 view.banner 0 swiper1 !- banner2 7 3 7 jswiper indicator

2、-dots=Mtrue autoplay=true indicator-color= white4 p.ndicator-active-color=M#14DDF2M circular5 76 77 8 9 10 11 12 !-九宫格一13 7 14 7 15 16 fitem.title 17 186 7 v89101112131415 1R67891011121315index.js；三 口 G pages index IS index.js / data i/ / jvr-ij j产产&匚产产/5 7 Page(swiperList . ./images/1. jpg,./images

3、/2.jpg?1./images/3.jpg*, ,./images/4.jpg./images/5.jpg,| menuList:I item:*./images/a-xynotice.png* y title: 校园公告,由 news.wxml Xpages news ; & news.wxml 0 view.news-wrapper 0 view.item1 新闻列表viev/ class=item wx:for= ： newsLists * wx: key=index bindtap=M jumpToDetail data-id= item.id data-image= item.im

4、age data-title= item.title data-time= item.time data-outline= item.outlinedata-content= item.content ”0 item.title ；item.outline 14news.jspages news news.js 於 data 夕 newsLists3 v4 75 767891011121314 2122 2930 2345678910111213141516171819201/ pages/news/news.js2 7 Page(data:newsLists:rnid:l,image:./i

5、mages/01.png,title厂掘金终结湖人七连胜！二time:,2021-2-15*,outline厂七连胜被终结！湖人队没有了霍华德，季后赛该如何对抗约基奇呢？:content:北京时间2月15日，NBA常规赛结束了一场焦点大战，掘金122-105复仇湖人,迎9,3超 detaiLwxml X口 detail 出 detaiLwxml 0 view.news-wrapper & view 京 view.tpc1 v (view bindtap=jumpToDetail title ； outline gview class=tpc time /image.收藏!-新闻内容一 cont

6、ent 出 suggests.xml X口 suggests 电 suggests.wxml 京 pickerJ、J J八 J J J JJ . JJ 一 1 02 jq J J J，J J W3C- JCZJ - J J&b J 1 J4 567891011121314151617181920215678910111213141516171819202114S0： radio value=男卜1男女保密(viev/ 选择运动项目：selectorValue vievj 预约日期：currentDate vie风)所在地区：(region Q/pickerJSsuggests.js Xpage

7、s suggests JSsuggests.js .最新新词 )i掘金终结湖人七连胜！酊隙七连胜被终结！湖人队.一身没有了霍华德季后赛一一7 一该如何对抗约基奇呢？南部战区歼-10C战机跨校园公吉砥新闻防疫专栏昼夜飞彳到II练南部战区空军航空兵某 旅组织开展飞行训练， 锤炼部队全天候作战能力。英军F-35B战斗机空中加体育芸手督导专栏帆图书馆油采用软管加油方英国威尔士亲王号航母 搭载的F-35B战斗机，参 加北约冷反应”期间空见发诱色页进行空中加油.1987年，小伙花25万买一 张无限次机票容曾联苗天展新髡闻早见反震WfeChag21:1724% azz意见反馈首页由 China MiHtar

8、y谙输入您的建议请输入姓名性别：男女保密选择运动项目：预约日期:所在地区:南部战区空军航空兵某旅组织开展飞行练，锤炼部队全天候作战能力。二?收藏（6点赞一则南部战区海军航空兵飞行i川练的新 闻近日在网络上引起热议眼尖的网友们发现训练中的歼-11 b都已换装国产发动今苴更今苴更怠见反便机而目前歼10c、歼-20等主力战机都陆 续换上中国心这些突破的背后有哪些WeChat 21:1724% OLZ最新新词 )1掘金终结湖人七连胜！酊隙七连胜被终结！湖人队 .一身没有了霍华德季后赛 一一7 一该如何对抗约基奇呢？南部战区歼-10C战机跨昼夜飞彳到II练南部战区空军航空兵某 旅组织开展飞行训练， 锤炼部队全天候作战能校园公吉砥新闻防疫专栏力。体育芸手O督导专栏帆图书馆英军F-35B战斗机空中加 油采用软管加油方 英国威尔士亲王号航母 |搭我的F-35B战斗机，参 |加北约冷反应”期间 进行空中加油.色页空见发诱1987年，小伙花25万买一 张无限次机票容曾联苗天展新菊耳聋见反震