在app.json中新增加5个页面
{ "pages": [ "pages/index/index", "pages/aerospace/aerospace", "pages/moon/moon", "pages/satellite/satellite", "pages/station/station", "pages/deepspace/deepspace" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }修改index.wxml文件
<!--index.wxml--> <navigation-bar title="创建页面与导航" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">中国航天领域主要成果</view> <navigator url="../aerospace/aerospace"> <view> <icon type="success" /> <view class="text-style">载人航天</view> <image src="/images/right_arrow.png" /> </view> </navigator> <navigator url="../moon/moon"> <view> <icon type="success" /> <view class="text-style">探月工程</view> <image src="/images/right_arrow.png" /> </view> </navigator> <navigator url="../satellite/satellite"> <view> <icon type="success" /> <view class="text-style">卫星应用</view> <image src="/images/right_arrow.png" /> </view> </navigator> <navigator url="../station/station"> <view> <icon type="cancel"/> <view class="text-style">空间站</view> <image src="/images/right_arrow.png" /> </view> </navigator> <navigator url="../deepspace/deepspace"> <view> <icon type="download"/> <view class="text-style">深空探测</view> <image src="/images/right_arrow.png" /> </view> </navigator> </view> </scroll-view>修改index.wxss文件
/*index.wxss*/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } navigator { margin: 20rpx; font-size: 48rpx; } navigator>view { display: flex; flex-direction: row; margin: 20rpx 0; padding: 20rpx 0; align-items: center; } icon { margin-right: 20rpx; transform: scale(1.5); } .text-style { flex: 1; } image { width: 60rpx; height: 60rpx; }修改app.wxss文件
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: larger; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; } .txt-style { font-size: large; text-align: justify; line-height: 2em; margin: 20rpx; color: purple; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid silver; } .title { font-size: larger; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; } .txt-style { font-size: large; text-align: justify; line-height: 2em; margin: 20rpx; color: purple; }其他页面一样，实现
