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

最新推荐文章于 2025-01-15 12:07:27 发布

原创

最新推荐文章于 2025-01-15 12:07:27 发布 · 4.2k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序实战 #微信小程序 #校园导览 #导航小程序 #小程序轮播图

本文介绍如何在微信小程序中实现校园导览功能，包括编辑校园简介页面，设置轮播图，并在地图导航上绑定页面跳转事件，为用户提供直观的校园浏览体验。

编辑校园简介页面

轮播图

新建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 c