微信小程序实战——校园导览 0x1 校园简介

编辑校园简介页面

轮播图

新建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'
    })
  }
  //...
})

效果演示