微信小程序定位功能+页面滚动+列表展示

效果图

地图定位代码：

wxml：

    <!-- 地图 -->
<view class="shop-map"><map class="{{isShowMap == true ? 'map-area' : 'map-area-hidden'}}"longitude = "{{location.longitude}}" latitude="{{location.latitude}}"></map><view class="map-show" bind:tap="showMap"><view class="show-text">{{isShowMap?"收起地图":"展开地图"}}</view><image class="show-img" src="/images/tab-list-shop/push.png" /></view>
</view>

js：

    /*** 页面的初始数据*/data: {isShowMap: true,location:{}},/*** 生命周期函数--监听页面加载*/onLoad: function () {// 获取定位this.getLocation()},// 地图定位getLocation(){// 获取定位wx.getLocation({success:(res)=>{this.setData({location: res})console.log(this.data.location)}}) },// 是否显示地图showMap() {let isShowMap = this.data.isShowMapthis.setData({isShowMap: !isShowMap,})if(this.data.isShowMap){let topHeight = 61this.getWindowHeight(topHeight)}else{let topHeight = -330this.getWindowHeight(topHeight)}  },

css：

/* 地图 */
.shop-map {width: 100%;
}.map-area {width: 100%;height: 390rpx;transition: height 0.2s ;
}.map-area-hidden{height: 0;width: 100%;transition: height 0.2s ;
}.map-show {display: flex;width: 100%;padding: 20rpx 0;justify-content: center;
}.show-text {font-size: 20rpx;color: #9d9d9d;
}.show-img {width: 24rpx;height: 24rpx;
}

页面完整效果图：

页面完整代码：
wxml：

<navBar id="navBar" titleText="门店" fontSize="36"></navBar>
<view class="tab-list-shop"><!-- 子导航 --><view class="shop-nav"><view class="nav-nearby-store {{navSel==0 ? 'seleted-nav-nearby-store' : ''}}" bind:tap="nearbySel" >附近门店<view class="seleted-blue-line" wx:if="{{navSel==0}}"></view></view><view class="nav-my-collect {{navSel==1 ? 'seleted-nav-my-collect' : ''}}" bind:tap="collectSel">常用/收藏<view class="seleted-blue-line" wx:if="{{navSel==1}}"></view></view></view><!-- 搜索 --><view class="shop-search"><view class="sel-address">武汉<image class="sel-address-img" src="/images/tab-list-shop/down.png" /></view><view class="search-area"><image class="search-img" src="/images/tab-list-shop/search.png" /><input class="search-input" placeholder="搜索门店" /></view></view><!-- 地图 --><view class="shop-map"><map class="{{isShowMap == true ? 'map-area' : 'map-area-hidden'}}"longitude = "{{location.longitude}}" latitude="{{location.latitude}}"></map><view class="map-show" bind:tap="showMap"><view class="show-text">{{isShowMap?"收起地图":"展开地图"}}</view><image class="show-img" src="/images/tab-list-shop/push.png" /></view></view><!-- 门店list --><swiper class="shop-store" style="height:{{scrollHeight}}rpx" bindchange="selType" current="{{swiperTypeIndex}}"><swiper-item class="nearby-store-item"><scroll-view class="scroll-store" style="height:100%" scroll-y="true" scroll-top="2"><block><view scroll-y="true" class="store-item {{currentIndex == index ? 'store-item-seleted' : ''}}" wx:for="{{storeInfor}}" data-index="{{index}}" wx:if="{{index<6}}" wx:key="index" bind:tap="seletedStore"><view class="store-item-name"><image class="name-img" src="/images/tab-list-shop/collect.png" /><view class="name-txt">{{item.name}}</view><view class="name-tag">离你最近</view></view><view class="store-item-now"><view class="now-word">NOW</view><view class="now-txt">现在下单，无需等待</view></view><view class="store-item-address"><image class="address-img" src="/images/tab-list-shop/navigation.png" /><view class="address-text">{{item.address}}</view></view><view class="store-item-time"><image class="time-img" src="/images/tab-list-shop/time.png" /><view class="time-txt">{{item.worktime}}</view></view><view class="in-operation">{{item.isWorking ? "营业中" : "歇业中"}}</view><view class="colmon-line"></view><view class="store-item-call-navigation"><view class="call-navigation-txt">去下单</view><view class="call-navigation-distance">{{item.distance}}</view><view class="call-navigation-img"><image class="call-img" src="/images/tab-list-shop/call.png" /><image class="navigation-img" src="/images/tab-list-shop/send.png" /></view></view></view><!-- 查看全部 --><view class="query-all" bind:tap="showMore">查看全部（{{storeInfor.length-6}}）</view></block></scroll-view></swiper-item><swiper-item class="collect-store-item">您暂时没有常用/收藏的门店~</swiper-item></swiper>
</view>

js：

Page({/*** 页面的初始数据*/data: {addressList: [{id: 0,name: '武汉'},{id: 1,name: '长沙'},{id: 2,name: '南京'},{id: 3,name: '北京'}],storeInfor: [{name: "茶百道武汉大智路店1",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032111",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店2",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032222",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店3",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032333",worktime: "09:00~23:29",isWorking: false,distance: "0.97km"},{name: "茶百道武汉大智路店4",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店5",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店6",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店7",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店8",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店9",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},{name: "茶百道武汉大智路店10",address: "湖北省武汉市江岸区湖北省武汉市江岸区中山大道1032444",worktime: "09:00~23:29",isWorking: true,distance: "0.97km"},],isShowMap: true,shownList:{},currentIndex: "",navSel: 0,windowHeight: "",scrollHeight:"",tabIndex: "",swiperTypeIndex: 0,location:{}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 获取屏幕高度let topHeight = 61this.getWindowHeight(topHeight)// 获取定位this.getLocation()//获取数据this.getStoreList()},//获取门店数据getStoreList(){let shownList = ""for(let i=0 ; i<6; i++){shownList.push(this.data.storeInfor[i])}console.log(shownList)this.setData({shownList:shownList,})},// 获取屏幕高度getWindowHeight(topHeight){wx.getSystemInfo({success: (res) => {let windowHeight = res.windowHeightthis.setData({windowHeight: windowHeight,scrollHeight: windowHeight - topHeight})}})},// 地图定位getLocation(){// 获取定位wx.getLocation({success:(res)=>{this.setData({location: res})console.log(this.data.location)}}) },// 选中附近门店nearbySel(e) {this.setData({navSel: 0,swiperTypeIndex: 0})},// 选中收藏门店collectSel(e) {this.setData({navSel: 1,swiperTypeIndex: 1})},// 是否显示地图showMap() {let isShowMap = this.data.isShowMapthis.setData({isShowMap: !isShowMap,})if(this.data.isShowMap){let topHeight = 61this.getWindowHeight(topHeight)}else{let topHeight = -330this.getWindowHeight(topHeight)}  },// 选中单个门店seletedStore(e) {console.log(e)let seletedIndex = e.currentTarget.dataset.indexthis.setData({currentIndex: seletedIndex,})wx.navigateTo({url: '/pages/tab-list-type/tab-list-type',});},// 选择门店类型 附近/收藏selType(e){let swiperTypeIndex = e.detail.currentthis.data.swiperTypeIndex = swiperTypeIndexif (swiperTypeIndex == 0){this.setData({navSel: 0,})}else{this.setData({navSel: 1,})}},// 滑动到顶部时upper(e){console.log(e)},// 滑动到底部时lower(e){console.log(e)},tap() {for (let i = 0; i < order.length; ++i) {if (storeInfor[i] === this.data.toView) {this.setData({toView: order[i + 1],scrollTop: (i + 1) * 200})break}}},showMore(){}})

css：

.tab-list-shop {margin-top: 11vh;
}/* 子导航 */
.shop-nav {margin: 0px 40rpx;display: flex;/* width: 100%; */
}.nav-nearby-store,
.nav-my-collect {width: 50%;text-align: center;font-size: 28rpx;position: relative;color: #9d9d9d;
}.seleted-nav-nearby-store,
.seleted-nav-my-collect {color: #000;
}.seleted-blue-line{position: absolute;width: 60rpx;background-color: #1a2b79;height: 6rpx;border-radius: 4rpx;top: 23px;left: 42%;
}/* 搜索 */.shop-search {display: flex;margin: 30rpx 30rpx;
}.sel-address {width: 12%;margin-right: 6%;text-align: center;font-size: 24rpx;display: flex;align-items: center;
}.sel-address-img {width: 14rpx;height: 10rpx;margin-left: 6rpx;
}.search-area {position: relative;width: 64%;height: 52rpx;background-color: #f8f8f8;border-radius: 24rpx;font-size: 24rpx;/* padding: 0rpx 10rpx 0rpx 56rpx; */
}.search-img {position: absolute;width: 24rpx;height: 24rpx;top: 26%;left: 24rpx;
}.search-input {width: 36%;height: 52rpx;background-color: #f8f8f8;border-radius: 24rpx;font-size: 24rpx;/* padding: 0rpx 10rpx 0rpx 56rpx; */padding-left: 56rpx;
}/* 地图 */
.shop-map {width: 100%;
}.map-area {width: 100%;height: 390rpx;transition: height 0.2s ;
}.map-area-hidden{height: 0;width: 100%;transition: height 0.2s ;
}.map-show {display: flex;width: 100%;padding: 20rpx 0;justify-content: center;
}.show-text {font-size: 20rpx;color: #9d9d9d;
}.show-img {width: 24rpx;height: 24rpx;
}/* 门店list *//* 附近门店 */
.shop-store {background-color: #f8f8f8;padding: 0 30rpx 0 30rpx;
}.scroll-store{height: 100%;/* ::-webkit-scrollbar */
}::-webkit-scrollbar
{width: 20px;height: 6px;background-color: #1a2b79;
}.store-item {position: relative;width: 90%;background-color: white;padding: 30rpx;margin-top: 30rpx;border-radius: 16rpx;border: 1rpx solid white;
}.store-item-seleted {border: 1rpx solid #55629c;
}.store-item-name {display: flex;align-items: flex-end;
}.name-img {width: 30rpx;height: 30rpx;
}.name-txt {font-size: 26rpx;margin-left: 16rpx;
}.name-tag {font-size: 15rpx;color: #1a2b79;margin-left: 26rpx;background-color: #e5eef6;width: 90rpx;text-align: center;border-radius: 16rpx;height: 20rpx;padding: 4rpx 0;
}.store-item-now {display: flex;margin-top: 14rpx;align-items: center;
}.now-word {font-size: 12rpx;background-color: #1a2b79;color: white;padding: 4rpx 8rpx;border-radius: 16rpx;
}.now-txt {font-size: 14rpx;color: #1a2b79;margin-left: 14rpx;
}.store-item-address {margin-top: 16rpx;display: flex;
}.address-img {width: 28rpx;height: 28rpx;
}.address-text {font-size: 20rpx;color: #858585;margin-left: 12rpx;width: 60%;
}.nearby-store-item{overflow-y: scroll;
}.store-item-time {margin-top: 14rpx;display: flex;
}.colmon-line {position: absolute;width: 2rpx;height: 70%;background: #f7f6f6;right: 188rpx;top: 38rpx;
}.in-operation {border: 1rpx solid #55629c;width: 90rpx;border-radius: 6rpx;text-align: center;font-size: 20rpx;
}.time-txt {font-size: 20rpx;color: #858585;margin-left: 12rpx;
}.time-img {width: 24rpx;height: 24rpx;
}.in-operation {margin-top: 14rpx;font-size: 22rpx;color: #1a2b79;
}.store-item-call-navigation {position: absolute;right: 40rpx;top: 64rpx;text-align: center;
}.call-navigation-txt {font-size: 24rpx;
}.call-navigation-distance {font-size: 18rpx;
}.call-navigation-img {display: flex;
}.call-img {margin-top: 24rpx;width: 44rpx;height: 44rpx;margin-right: 10rpx;
}.navigation-img {margin-top: 24rpx;width: 44rpx;height: 44rpx;margin-left: 10rpx;
}/* 常用门店 */
.collect-store-item{margin-top: 260rpx;text-align: center;
}
/* 查看更多 */
.query-all {margin: 24rpx 0;font-size: 20rpx;color: #858585;text-align: center;
}

我是本篇小编kk，遇到Bug需要帮助，欢迎加wx：xmzl1988，备注"csdn博客“，温馨提示此为有偿服务;

微信小程序定位功能+页面滚动+列表展示相关推荐

vue 开发微信小程序定位功能
边做边总结系列: 小程序里获取个人定位,如果没有在app.json文件里配置小程序接口权限:permission,会提示↓ 配置信息图下: 贴代码: "permission": { ...
小程序聊天功能页面滚动到底部
写在前:当我们给一个类设置overflow-y: scroll; overflow: hidden; 的时候,wx.pageScrollTo不起作用. 1.给盒子定义一个id为x_chat:(其他样式 ...
微信小程序定位功能
目录 1.wx.chooseLocation (API) 2.在app.josn中permission授权(也可以不用授权) 3.wxml代码 4.js代码执行结果: 点击按钮后出现页面: 1.wx ...
【代码】微信小程序简单一个页面，网上图片展示
//wxss /* 基础样式 */ view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,check ...
微信小程序——意见反馈页面的实现（使用使用微信官方反馈功能）
微信小程序--意见反馈页面的实现 (使用使用微信官方反馈功能) 代码: .json {"navigationBarTitleText": "问题反馈" } .w ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...

微信小程序定位功能+页面滚动+列表展示

效果图

地图定位代码：

微信小程序定位功能+页面滚动+列表展示相关推荐

最新文章

热门文章