编辑校园简介页面
轮播图
新建resource文件夹=》新建images文件夹=》将要轮播的图片放在该目录下
页面
<!--introduction.wxml--> <view class="intro"> <swiper class="top" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}"> <swiper-item class="" wx:for="{{imgUrls}}" wx:key="true"> <image src="/resource/images/{{item}}" class="top-img" /> </swiper-item> </swiper> <image class="nav-btn" src="/resource/images/map.png"></image> <view class="intro-info"> <view class="intro-title"> <view class="intro-title-ch">辽宁工程技术大学</view> <view class="intro-title-en">Liaoning Technial University</view> <view class="intro-content"> 辽宁工程技术大学创建于1949年，是一所具有七十年悠久历史的国家重点大学。新中国成立前夕，为恢复生产、发展经济、支援解放全中国，经东北人民政府批准，分别成立了阜新工科高级职业学校、抚顺工科高级职业学校、鹤岗工科高级职业学校、鸡西煤矿工业学校以及东北煤矿工人速成学校。1958年，在这些学校的基础上，分别成立了阜新煤矿学院、抚顺煤矿学院、鸡西矿业学院和辽宁煤矿师范学院。六十年代初期院校调整，四校合并，校址选于辽宁省阜新市，定名为阜新煤矿学院，成为东北地区唯一一所煤炭高等院校。1978年学校更名为阜新矿业学院。1996年学校更名为辽宁工程技术大学。1998年学校由原煤炭工业部划归辽宁省人民政府管理，实行中央与地方共建、以地方管理为主的体制。1999、2000年，原阜新工业学校、辽宁电子计算机学校和辽宁省财政学校先后并入学校。现设有25个学院、67个本科专业。在册学生3.2万余人，其中全日制在校博士生、硕士生、本科生、留学生2.6万余人。 </view> </view> </view> </view>
/* introduction.wxss */ .top { width: 750rpx; height: 500rpx; } .top-img { width: 750rpx; height: 500rpx; } .nav-btn { position: absolute; z-index: 99; right: 0; bottom: 52%; width: 160rpx; height: 160rpx; } .intro-title { position: relative; } .intro-info { padding: 0 40rpx; background-color: rgba(248, 248, 248, .3); } .intro-title-ch { padding: 54rpx 0; line-height: 60rpx; font-size: 70rpx; color: #ae0009; } .intro-title-en { padding: 10rpx 0; padding-left: 90rpx; font-size: 40rpx; font-weight: normal; color: #ae0009; } .intro-content { padding: 40rpx 0; line-height: 48rpx; font-size: 30rpx; font-weight: 300; color: #464645; text-align: justify; }
在地图导航绑定页面跳转事件
<!--introduction.wxml--> <view class="intro"> <!-- ... --> <image class="nav-btn" src="/resource/images/map.png" bindtap="goToNav"></image> <!-- ... --> </view>
// introduction.js Page({ /** * 页面的初始数据 */ data: { imgUrls: ['slide-1.jpg','slide-2.jpg','slide-3.jpg','slide-4.jpg'], indicatorDots:true, autoplay:true, interval:3000 }, goToNav: function () { wx.navigateTo({ url: '/pages/navigation/navigation' }) } //... })
效果演示
- 版权声明：文章来源于网络采集，版权归原创者所有，均已注明来源，如未注明可能来源未知，如有侵权请联系管理员删除。
