第7章秦岭山水

最新推荐文章于 2025-02-05 11:30:23 发布

孤柒

最新推荐文章于 2025-02-05 11:30:23 发布

阅读量402

点赞数 4

文章标签：前端

本文链接：https://blog.csdn.net/lyj13697942507/article/details/138465806

版权

7.1 准备工作

该项目共有4个页面，分别为首页、内容页、详情页和预约页。

首页：

内容页：

详情页：

预约页：

7.1.1 创建数据文件

本项目的所有数据均来自本地，为了便于管理，将数据存放于data. js文件中，并通过module. exports向外部暴露一个接口。定义好模块后，在其他js文件中通过require（）引用这个模块即可。

data.js文件数据如下：

function getBannerData(){
  var arr =[
    '/pages/images/banner1.png',
    '/pages/images/banner2.png',
    '/pages/images/banner3.png',
  ]
  return arr
}

function getIndexNavData(){
  var arr = [
    {
      id:1,
      icon:'/pages/images/ls.png',
      title:'青山'
    },
    {
      id:2,
      icon:'/pages/images/qs.png',
      title:'绿水'
    },
    {
      id:3,
      icon:'/pages/images/y.png',
      title:'秦岭峪'
    },
    {
      id:4,
      icon:'/pages/images/dw.png',
      title:'动物'
    },
    {
      id:5,
      icon:'/pages/images/zw.png',
      title:'植物'
    },
  ]
  return arr
}

function getIndexNavSectionData(){
  var arr = [
    [
    {
      subject:"终南山",
      coverpath:"/pages/images/zn1.png",
      price:"门票：￥45",
      postId:11,
      message:'终南山是道教主流全真派的圣地，又名太乙山、地肺山、中南山、周南山，简称南山，是秦岭山脉的一段，西起宝鸡市眉县，东至西安蓝田县，有“仙都”“洞天之冠”“天下第一福地”的美称！'
    },
    {
      subject:"华山",
      coverpath:"/pages/images/hs1.png",
      price:"门票：180￥",
      postId:12,
      message:'华山古称“西岳”，雅称“太华山”，为中国五岳之一、中华文明的发祥地、中华民族的圣山，是国家级风景名胜区。华山雄伟奇峻，山势峻悄，壁立千例，群峰挺秀，自古以来就有“华山天下险”、“奇险天下第一山”的美誉。'
    },
    {
      subject:"太白山",
      coverpath:"/pages/images/tb1.png",
      price:"门票：100￥",
      postId:13,
      message:'白山，是秦岭山脉的主峰，位于陕西省宝鸡市眉县、太白和西安市周至三县交汇处，如鹤立鸡群之势冠列秦岭群峰，主峰拔仙台，海拔3771.2米，是我国大陆东部的第一高峰。自古以来，以高、寒、险、奇、富饶、神秘的特点闻名于世、称雄华夏。'
    },
    {
      subject:"翠华山",
      coverpath:"/pages/images/ch1.png",
      price:"门票：58￥",
      postId:14,
      message:'翠华山，位于陕西省西安市长安区太乙宫镇，系终南山的一个支峰，位于秦岭北麓，距西安市区20千米，主峰海拔2604米，总面积32平方千米。因汉武帝曾在这里祭祀过太乙神，故又名太乙山。'
    },
    {
      subject:"渭河",
      coverpath:"/pages/images/wh1.png",
      length:"818千米",
      postId:21,
      message:'渭河，古称渭水，是黄河的最大支流。发源于甘肃省定西市渭源县鸟鼠山，横跨甘肃东部和陕西中部，主要流经今甘肃天水、陕西省关中平原的宝鸡、咸阳、西安、渭南等地，至渭南市潼关县汇入黄河。干流全长818公里，流域总面积134766平方公里。'
    },
    {
      postId:22,
      subject:"汉江",
      coverpath:"/pages/images/hj1.png",
      length:"514千米",
      message:'汉江，又称汉水、汉江河，为长江最大的一条支流，现代水文认为有三源：中源漾水、北源沮水、南源玉带河，均在秦岭南麓陕西宁强县境内，流经沔县（现勉县）称沔水，东流至汉中始称汉水；自安康至丹江口段古称沧浪水，襄阳以下别名襄江、襄水、襄河。'
    },
    {
      postId:23,
      subject:"嘉陵江",
      coverpath:"/pages/images/jlj1.png",
      length:"1119千米",
      message:'嘉陵江发源于秦岭北麓的陕西省凤县代王山。干流流经陕西省、甘肃省、四川省、重庆市，在重庆市朝天门汇入长江。'
    },
    {
      postId:24,
      subject:"洛河",
      coverpath:"/pages/images/lh1.png",
      length:"680千米",
      message:'洛河源出陕西省渭南市华州区西南与蓝田县、临渭区交界的箭峪岭侧木岔沟（或陕西省洛南县洛源镇的龙潭泉），流经陕西省东南部及河南省西北部洛阳市境内，在河南省巩义市注入黄河。'
    },
    {
      postId:31,
      subject:"汤峪",
      coverpath:"/pages/images/ty1.png",
      message:'洛河源出陕西省渭南市华州区西南与蓝田县、临渭区交界的箭峪岭侧木岔沟（或陕西省洛南县洛源镇的龙潭泉），流经陕西省东南部及河南省西北部洛阳市境内，在河南省巩义市注入黄河。'
    },
    {
      postId:32,
      subject:"子午峪",
      coverpath:"/pages/images/zw1.png",
      message:'子午峪，一名子峪，一名子午谷，一名子午道，秦岭七十二峪之一，位于陕西省西安市境内。峪长六百六十里，北口曰子，在西安府南百里；南口曰午，在汉中府洋县东一百六十里。此地南达汉中，现在是长安区子午镇境内的一条沟，是长安城通往南方的交通要道，也是西安市长安区子午镇境内的一条河谷。'
    },
    {
      postId:33,
      subject:"沣峪",
      coverpath:"/pages/images/fy1.png",
      message:'沣峪位于西安市南部的秦岭北麓，距西安市主城区约50公里，隶属长安区滦镇街道办事处管辖。210国道从其间穿过，西康高速没有建成通车以前，这里是通往陕南、四川的要道。'
    },
    {
      postId:41,
      subject:"朱鹮",
      coverpath:"/pages/images/zh1.png",
      message:'朱鹮有着"东方宝石"的美称，生活在距今约6000万年前，比人类历史还要久远的"古老之鸟"，是地球上最古老的鸟类之一，被称为"活化石"。'
    },
    {
      postId:42,
      subject:"大熊猫",
      coverpath:"/pages/images/dxm1.png",
      message:'大熊猫秦岭亚种，是大熊猫的一个亚种。秦岭亚种头小牙齿大；头圆；胸部呈深棕色，腹部为棕色，下腹部毛尖棕色，毛干白色。'
    },
    {
      postId:43,
      subject:"金丝猴",
      coverpath:"/pages/images/jsh1.png",
      message:'金丝猴是杂食性动物，主要以植物叶、花、果为主食，也会吃竹笋、苔藓、菌类和昆虫等。它们喜欢在高山密林中活动，栖息地海拔一般在1500-3500米之间。它们身上的长毛可以帮助它们抵御寒冷。'
    },
    {
      postId:44,
      subject:"羚牛",
      coverpath:"/pages/images/ln1.png",
      message:'羚牛，偶蹄目牛科羚牛属哺乳动物，俗称扭角羚、野山牛、盘羊。其体形粗壮。尾短。吻鼻部隆起且裸露。前额隆起，毛短而蓬松。角基粗，由头顶长出后先向上升起，又突然翻转，靠近头部，复向外伸，然后又向后弯转，近尖端又向内弯入。角黑色。侧蹄明显。额部及眼圈浅棕白色。头余部浅棕。喉、颈、肩、胸深棕色。耳壳背面近白色，腰及臀部杂有深棕黑色的毛，前肢下部前黑后白，后肢下部黑色，侧蹄有白色斑块。因体形粗壮如牛，叫声似羚羊，故名羚牛。'
    },
    {
      postId:51,
      subject:"连香树",
      coverpath:"/pages/images/lxs1.png",
      message:'连香树为毛茛目连香树科连香树属落叶乔木，主要生长在温带，该种为第三纪古热带植物的孑遗种单科植物，是较古老原始的木本植物，雌雄异株，结实较少，天然更新困难，资源稀少，已濒临灭绝状态，被列入《中国珍稀濒危植物名录》、 《中国植物红皮书》和第一批《国家重点保护野生植物名录》，是国家二级重点保护野生植物种。'
    },
    {
      postId:52,
      subject:"星叶草",
      coverpath:"/pages/images/xyc1.png",
      message:'星叶草（Circaeaster agrestis Maxim.）是星叶草科星叶草属一年生小草本植物，高可达10厘米。子叶线形或披针状线形，叶菱状倒卵形、匙形或楔形，基部渐狭，边缘上部有小牙齿，背面粉绿色。花小，萼片狭卵形，花药椭圆球形，子房长圆形，花柱不存在，瘦果狭长圆形或近纺锤形，4月至6月开花。'
    },
    {
      postId:53,
      subject:"香果树",
      coverpath:"/pages/images/xgs1.png",
      message:'香果树（Emmenopterys henryi Oliv.）为茜草科香果树属的落叶大乔木。高达30米，胸径1米；叶宽椭圆形、宽卵形或卵状椭圆形，托叶三角状卵形，早落；花芳香，萼裂片近圆形，叶状萼裂片白，淡红或淡黄色；蒴果长圆状卵形或近纺锤形，无毛或有柔毛；种子小而有宽翅；花期6-8月；果期8-11月。'
    },
    {
      postId:54,
      subject:"太白红杉",
      coverpath:"/pages/images/tbhs1.png",
      message:'太白红杉是松科落叶松属的乔木。株高可达25米，胸径约80厘米；树皮灰色至暗灰褐色，或稍带黑色，裂成薄片状；小枝下垂，当年生长枝淡褐黄色、淡黄色或淡灰黄色，冬芽近球形，基部稍宽，外部芽鳞褐色或淡褐色，三角状卵形；雄球花卵圆形，雄蕊黄色，雌球花和幼果淡紫色，卵状矩圆形，苞鳞直伸，先端急尖；叶倒披针状窄条形；球果卵状矩圆形，种子斜三角状卵圆形；花期4-5月；球果10月成熟。'
    }
    ]
  ]
return arr
}
module.exports= {
  getBannerData:getBannerData,
  getIndexNavData:getIndexNavData,
  getIndexNavSectionData:getIndexNavSectionData
}

7.1.2 创建项目目录结构

在小程序项目中，images目录存放项目的所有图像，pages目录中的项目页分别为index（首页）、detail（内容页）、detail-all（详情页）和about（预约页）, utils目录中包括项目中所有数据的data. js文件以及小程序的项目配置文件.

7.1.3 app.json文件

app. json文件是对整个小程序的全局配置，主要包括pages、window及tabBar。

{
  "pages": [
    "pages/index/index",
    "pages/detail-all/detail-all",
    "pages/detail/detail",
    "pages/about/about" 
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "秦岭山水",
    "navigationBarBackgroundColor": "#fff"
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#d24a58",
    "borderStyle":"white",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/ww.png",
        "selectedIconPath": "pages/images/ww.png"
      },
      {
        "pagePath": "pages/detail-all/detail-all",
        "text": "详情",
        "iconPath": "pages/images/ww.png",
        "selectedIconPath": "pages/images/ww.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "我的",
        "iconPath": "pages/images/ww.png",
        "selectedIconPath": "pages/images/ww.png"
      }
    ]
  }
}

7.2 首页

首页由轮播项、导航项和列表项3部分组成，这3部分被包含在<scroll-view >组件中。首页的页面文件为index. js、index. wxml、index. wxss和index. json。

index.js代码：

var app = getApp()
var fileData = require('../../utils/data')
Page({
  data:{
    banner_url:fileData.getBannerData(),
    interval:3000,
    duration:1000,
    vertical:false,
    indicatordots:true,
    autoplay:true,
    navTopItems:fileData.getIndexNavData(),
    curNavId:1,
    curIndex:0,
    colors:["red","orange","yellow","green","purple"],
    navSectionItems:fileData.getIndexNavSectionData()
  },
    switchTap:function(res){
      console.log(res.currentTarget.dataset.index)
      let id=res.currentTarget.dataset.id;
      let index=res.currentTarget.dataset.index
      this.setData({
        curNavId:id,
        curIndex:index
      })
    },
    laoMore:function(res){
      console.log('到底了')
      var curid=this.data.curIndex;

      if(this.data.navSectionItems[curid]==0){
      return
      }else{
        wx.showToast({
          title: '加载中...',
          icon:'loading',
          duration:2000
        })
        var that=this;
        that.data.navSectionItems[curid]=
        that.data.navSectionItems[curid].concat(that.data.navSectionItems[curid]);
        that.setData({
          list:that.data.navSectionItems
        })
      }
    },
    navigateDetail:function(res){
      console.log(res.target.dataset.postId)
      var postId=res.target.dataset.postId
      wx.navigateTo({
        url: '../detail/detail? id=' + postId, 
        success:function(){
          wx.setNavigationBarTitle({
            title: '内容页',
          })
          wx.showNavigationBarLoading();
          setTimeout(function(){
            wx.hideNavigationBarLoading();
          },2000)
        }
      })
    },
    onLoad:function(){
      console.log(this.data.banner_url)
      console.log(this.data.navSectionItems)
      wx.showToast({
        title: '正在加载...',
        icon:'loading',
        duration:10000,
        mask:true
      })
      setTimeout(function(){
        wx.hideToast();
      },2000)
      this.setData({
        list:this.data.navSectionItems
      })
    }
  })

index. wxml代码：

<view class="swiper">
 <swiper interval="{{interval}}" duration="{{duration}}" vertical="{{vertical}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}">
 <block wx:for-items="{{banner_url}}" wx:key="this">
 <swiper-item>
 <block wx:if="{{item}}">  
 <image src="{{item}}" class="banner"></image>
 </block>
 <block wx:else>
 <image src="../images/hqpp.png"></image>
 </block>
 </swiper-item>
 </block>
 </swiper>
</view>

<view class="nav_top">
<block wx:for="{{navTopItems}}" wx:key="this">
  <view class='nav_top_item {{curNavId==item.id?"active_"+colors[index]:""}}' data-id='{{item.id}}' data-index="{{index}}" bindtap='switchTap'>
<view><image src="{{item.icon}}" class="to"></image></view>
<text style="margin-left: 10px;">{{item.title}}</text>
</view>
</block>
</view>

<view class="nav_section">
<view wx:if="{{list[curIndex]}}">
<block wx:for="{{list[curIndex]}}" wx:key="this">
<view class="nav_section_item">

<view class="section-images">
<block wx:if="{{item.coverpath}}">
<image src="{{item.coverpath}}"bindtap="navigateDetail"data-post-id="{{item.postId}}" class="tog">
</image>
</block>
<block wx:else>
<image src="../images/default_pic.png"></image>
</block>
</view>

<view class="section_con">
<view class="section_con_Sub">
<text>{{item.subject}}</text>
</view>
<view class="section_con_price">
<text>{{item.price}}</text>
</view>
<view class="text_index">{{item.message}}</view>
</view>
</view>
<view style="border-bottom: 1px solid #ccc; margin:20px"></view>
</block>
</view>
<view wx:else>
<text>暂无数据</text>
</view>
</view>

index.wxss代码：

.banner{
  width: 100%;
}
.nav_top{
  display: flex;
  justify-content: space-around;
  background-color:papayawhip;
}
.to{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.tog{
  width: 100px;
  height: 100px;
  margin: 20px 0 0 20px;
}
.nav_section_item{
  display: flex;
  flex-direction: row;
}
.section_con{
  margin: 20px 0 0 60px;
}
.section_con_Sub{
  line-height: 40px;
}
.section_con_price{
  line-height: 40px;
}
.text_index{
  width: 290px;
  height: 20px;
  overflow: hidden;
}

7.3 内容页

· 内容页由标题、图像及文字说明3部分组成，页面文件为detail.js、detail.wxml、detail.wxss和detail.json。

detail.js代码：

var app = getApp();
var fileData = require('../../utils/data')
Page({
  data:{
    navSectionItems: fileData.getIndexNavSectionData(),
  },
  onLoad:function(options){
var postId = options.id;
var shi = Math.floor(postId/10) - 1
var ge = postId % 10 - 1
    console.log(shi)
    console.log(ge)
    console.log(options)
    console.log(this.data.navSectionItems[shi][ge])
this.setData({
  list:this.data.navSectionItems[shi][ge]
})
  },
})

detail.wxml代码：

<view class="cont">
<!-- 标题 -->
 <view class="head">
 <text>{{list.subject}}</text>
 </view>
 <!-- 图像 -->
 <view class="images">
 <image src="{{list.coverpath}}"></image>
 </view>
 <view class="content">
 <text>{{list.message}}</text>
 </view>
</view>

7.4 详情页

详情页主要用来显示图像，其页面文件为detail-all. js、detail-all.wxml、detail-all. wxss和detail-all.json。

detail-all.js的代码如下：

Page({
  data:{
    pic:["../images/fj0.png","../images/fj1.png","../images/fj2.png","../images/fj3.png","../images/fj4.png","../images/fj5.png",]
  }
})

detail-all.wxml代码如下：

<block wx:for="{{pic}}" wx:key="this">
<view class="tc">
<image src="{{item}}"></image>
</view>
</block>

7.5 预约页

预约页包括获取用户图像及昵称，收集用户的其他信息，其页面文件为about.js、about.json、about.wxss和about.wxml。

about.js代码;

var app = getApp()
Page({
  data:{
    userInfo:{},
    date:"",
    region:""
  },
  onLoad:function(options){
    var that =this
    app.getUserInfo(function(userInfo){
      that.setData({
        userInfo:userInfo
      })
    })
  },
  changedate:function(e){
    this.setData({
      date:e.detail.value
    })
  },
  changeregion:function(e){
    this.setData({
      region:e.detail.value
    })
  },
  formSubmit:function(e){
    console.log('from发生了submit事件，携带数据为：',e.datail.value)
  }
})

about.wxml代码;

<view class="container">
  <view class="user_base_info">
    <view class="user_avatar">
      <block wx:if="{{userInfo.avatarUrl}}">
        <image src="{{userInfo.avatarUrl}}"></image>
      </block>
      <block wx:else>
        <image src="../images/hqpp.png" class="app"></image>
      </block>
    </view>
    <view class="user_info">
      <text>{{userInfo.nickName}}</text>
    </view>
  </view>
  <view class="use_addr_message">
    <view class="user_addr_item">
      <form bindsubmit="formSubmit" bindreset="formReset">
        <input placeholder="请输入姓名" class="add_sub" name="xm" style="border:1px solid black"/>
        <input placeholder="请输入要浏览的景区" class="add_sub" name="spot" style="border:1px solid black"/>
        <picker mode="date" class="addr_sub" bindchange="changedate" value="{{date}}" start="2018-1-1" end="2030-12-31" name="datetime" style="border:1px solid black">
          请选择时间:<text>{{date}}</text>
        </picker>
        <picker mode="region" class="addr_sub" bindchange="changeregion" value="{{date}}" name="address" style="border:1px solid black">
          请选择您的地区:<text>{{region}}</text>
        </picker>
        <button type="primary" class="btn" formtype="submit">提交数据</button>
      </form>
    </view>
  </view>
</view>