赞
踩
做了一个非常简单的校园介绍小程序。
下面是index
基本的轮播图功能
下面是功能部分,基于微信的一个地图功能。
index.js
//获取应用实例 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getSystemInfo({ success: function(res) { console.log(res.windowHeight) that.setData({ height:res.windowHeight }) }, }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } }) wx.request({ url: 'https://lixi777.cn/API/goods/', data: { type: "select", order: "", all: true }, header: { "content-type": "application/json" }, success: function (data) { console.log(data) }, })
index.wxml
<view class="container">
<image class='logo' src='/images/b.png' style='height:{{height}}px'></image>
<navigator url="/pages/jianjie/jianjie?title=郑州大学" hover-class="navigator-hover"><view class='topo'>郑大\n简介</view></navigator>
<navigator url="/pages/daohang/daohang?title=游览郑大" hover-class="navigator-hover"><view class='topt'>游览\n郑大</view></navigator>
</view>
/index.wxss/
.logo{ width: 100%; } .topo{ position: absolute; top:400rpx; left: 185rpx; width: 105rpx; height: 105rpx; background-color: #B0E0E6; text-align: center; border-radius: 500px; opacity:0.5; color: black; padding: 20rpx; } .topt{ position: absolute; top:400rpx; right: 185rpx; width: 105rpx; height: 105rpx; background-color: #B0E0E6; text-align: center; border-radius: 500px; opacity:0.5; color: black; padding: 20rpx; }
jianjie.js
Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
jianjie.wxml
<view> <swiper indicator-dots='true' style='height:460rpx' autoplay='true' interval='2000' duration='500'> <swiper-item> <image src="http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/5CwVfchcO3XLPEIA8*UdpLoYcTW33pbwkwA2OXEQUuE!/r/dDwBAAAAAAAA"></image> </swiper-item> <swiper-item> <image src="http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/g4ZukI.ThCaFIcgxvtI1.eIIbjtiCWJ.9.H7hiXsneE!/r/dEMBAAAAAAAA"></image> </swiper-item> <swiper-item> <image src="http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/wFBUkPuhjWVV7wAxnXoXCalxB5aZpZfGcIsp6k4rb9c!/r/dEABAAAAAAAA"></image> </swiper-item> <swiper-item> <image src="http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/NkRl3naNPb45ORhbN9bJcdkQp4MjS3tCJEdNZv5nxUE!/r/dEABAAAAAAAA"></image> </swiper-item> <swiper-item> <image src="http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/mln3DewZyby*mGfxkl3Sm.jnnXgofWoumOrXLFEMEOM!/r/dFYBAAAAAAAA"></image> </swiper-item> </swiper> <view class='zio'>郑州大学简介</view> <view class='zit'>Zhengzhou University </view> <text decode="nbsp" class='wenzhang'> 郑州大学(Zhengzhou University),简称“郑大”,是中华人民共和国教育部与 L服务国家提供有力支撑。学校与英国、美国、加拿大、德国、俄,和衷共济,凝心聚力,开拓进取,努力将我校建设成“国内知名、特色鲜明”的创新型多科性大学!</text> <navigator url="/pages/daohang/daohang?title=游览地大" hover-class="navigator-hover"><view class='anniu'><text>地图\n导航</text></view></navigator> </view>
jianjie.wxss
image{ width: 100%; height: 270px; } .zio{ font-size: 30px; color: #B22222; margin: 30px 0 15px 45px; } .zit{ font-size: 25px; color: #B22222; margin: 20px 0 40px 45px; } .wenzhang{ font-weight: 100; font-size: 15px; margin: 0 30px 30px 30px; display: inline-block; } .anniu{ position: absolute; font-size: 16px; top:400rpx; right: 50rpx; width: 105rpx; height: 105rpx; background-color: #B22222; text-align: center; border-radius: 500px; color: black; padding: 5rpx; } .anniu text{ display: inline-block; margin-top: 9rpx; font-size: 30rpx; color: wheat; }
daohang.js
var app = getApp() Page({ /** * 页面的初始数据 */ data: { scrollTop:0, isChecked:true, isSpread:true, img: "/images/o.png", didian:[{ imageo:"http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/TgN65VOIrZFPboBwsqs1eOmr2I0f3z8.AhH7qkBwc.g!/r/dAgBAAAAAAAA", wenzi:"主楼", id:"主楼", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/218pQdzPcxoTSTVLaIPWGB5P7D2nxlLJ2wx1bWfkATw!/r/dDIBAAAAAAAA", wenzi: "综合楼", id:"综合楼", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/7xUOPzX*u3SoL4H8ZcHN22jMs.l8yCs3VMAnwGltmfw!/r/dAgBAAAAAAAA", wenzi: "教一", id:"教一", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/LIaOTwLBd3ZShC2FHu2i8BoF1RQY7pY2trN6DQzh8X4!/r/dDIBAAAAAAAA", wenzi: "教二", id:"教二", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/AMseFqe47O4G00RRZsLOWuWFFUmt1.rNxzcwFf02Y14!/r/dFYBAAAAAAAA", wenzi: "实验楼", id:"实验楼", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/*MmDHS.ZGPxR*yF5uMX6nXMr2pLgydeDok1rfV*Vq1Y!/r/dPIAAAAAAAAA", wenzi: "教三", id: "教三", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/gRzTwogyf5cVwvmHY0khcH*K0dQHJ3TA2oDJPz03ZXU!/r/dDEBAAAAAAAA", wenzi: "LX博物馆", id: "地球科学博物馆", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/.ME.OeS3NPpMsSboTfJ7f5*L70mRHqmimwOnlwTARFQ!/r/dAgBAAAAAAAA", wenzi: "LX大讲堂", id: "春秋讲堂", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/fb3f5DNwI829DzhMBruIm0LwM6yeXxghOVV9GCn7Hzk!/r/dGEBAAAAAAAA", wenzi: "体育场", id: "体育场", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/fUZImZOACwmzkF6b0m54oqDdEk9DK3nOVg27PPQ8itk!/r/dAQBAAAAAAAA", wenzi: "学生餐厅", id: "学生餐厅", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/LPdzWZ1MG3RkWb7GN4g8XGRMmU2EMinGaEp5vhFHVTo!/r/dEQBAAAAAAAA", wenzi: "图书馆", id: "图书馆", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/iNZoWqdlGmVpntJoRe0FuEAWKhk5vYqMewH4qx3JzRk!/r/dHIAAAAAAAAA", wenzi: "北门", id: "北门", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/bDqF6hhyTapx4DijyKKSGquLzjkLjml1INdns1DAtuE!/r/dEQBAAAAAAAA", wenzi: "西门", id: "西门", image: "/images/r.png" }, { imageo: "http://r.photo.store.qq.com/psb?/V12jCv3P1JX1Bf/TlO.LPQO5RTbG4KPmBJxV36diiTQ6V221Cd1O1tXJj4!/r/dJEAAAAAAAAA", wenzi: "钟楼", id: "钟楼", image:"/images/r.png" } ], markers:[ { iconPath: "/images/n.png", id: 0, latitude: 34.818584, longitude: 113.530288, }, { iconPath: "/images/n.png", id: 1, latitude: 34.818104, longitude: 113.530390, }, { iconPath: "/images/n.png", id: 2, latitude: 34.818056, longitude: 113.527773, }, { iconPath: "/images/n.png", id: 3, latitude: 34.819148, longitude: 113.530154, }, { iconPath: "/images/n.png", id: 4, latitude: 34.819659, longitude: 113.531561, }, { iconPath: "/images/n.png", id: 5, latitude: 34.820663, longitude: 113.531821, }, { iconPath: "/images/n.png", id: 6, latitude: 34.814550, longitude: 113.529611, }, { iconPath: "/images/n.png", id: 7, latitude: 34.812243, longitude: 113.529247, }, { iconPath: "/images/n.png", id: 8, latitude: 34.813877, longitude: 113.525500, }, { iconPath: "/images/n.png", id: 9, latitude: 34.811235, longitude: 113.526100, }, { iconPath: "/images/n.png", id: 10, latitude: 34.810618, longitude: 113.528513, }, { iconPath: "/images/n.png", id: 11, latitude: 34.811984, longitude: 113.530347, }, { iconPath: "/images/n.png", id: 12, // title:'西门', latitude: 34.814591, longitude: 113.530207, }, { iconPath: "/images/n.png", id:13, // title: "樱花林", latitude: 34.814873, longitude: 113.529424, }] // ifShow:true }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, change:function(e){ var that = this; that.setData({ isChecked: !that.data.isChecked}); if(that.data.isSpread === true){ that.setData({ isSpread:false }) } else{ that.setData({isSpread:true}) } if(that.data.img=="/images/l.png"){ that.setData({img:"/images/o.png"}) } else{ that.setData({ img: "/images/l.png"}) } }, markertap(e){ console.log(e) var that=this; var markerId = e.markerId; var didian = that.data.didian; for (var i = 0; i < didian.length;i++){ if(didian[i].display){ didian[i].display=false; } } that.setData({didian:didian}) var data ={}; data['didian['+markerId+'].display']=true; that.setData(data); // 当点击相应的marker时下面相应的元素就会显示出来 that.setData({scrollTop:markerId*56}) // 改变marker的颜色 var id = e.markerId, data = that.data.markers; //用于存储处理过的数据 let markers = []; data.forEach(m=>{ //如果当前id为当前点击的标记的id那么显示高亮的图片 markers.push({ iconPath:m.id == id?"/images/m.png":"/images/n.png", id:m.id, latitude:m.latitude, longitude:m.longitude }) }); that.setData({ markers:markers }) }, tiaozhuan:function(e){ console.log(e) var that = this; var index = e.currentTarget.dataset.index; wx.openLocation({ latitude: that.data.markers[index].latitude, longitude: that.data.markers[index].longitude, name: that.data.didian[index].id }) } })
daohang.wxml
<!-- daohang.wxml --> <map id="map" longitude="113.534693" latitude="34.817947" scale="18" markers='{{markers}}' bindmarkertap='markertap' class="{{isChecked?'maptwo':'mapone'}}"> </map> <!-- 地点的个数 --> <view class='anniu' bindtap='change'> <view>这里总共有14个地点</view> <image src='{{img}}'></image> </view> <!-- 地址信息 --> <view style='width=100%;' hidden='{{!isSpread}}'> <scroll-view class='scr' scroll-y="true" style='height:465rpx' scroll-top="{{scrollTop}}"> <block wx:for="{{didian}}" wx:key="didian" id="item" > <view class="item {{item.display?'item2':''}}" data-index="{{index}}"> <image style='margin-top:2px' class='imageone' src="{{item.imageo}}"></image> <text>{{item.wenzi}}</text> <image style='margin-top:2px' data-index="{{index}}" bindtap="tiaozhuan" class='imagetwo' src="{{item.image}}"></image> </view> </block> </scroll-view> </view>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。