uniapp movable-area應用
更新時間：2023年08月20日 16:23:57 作者：周星星的學習筆記
這篇文章主要為大家介紹了uniapp movable-area應用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
需求
今天客戶提了一個需求，想做一個頁面，頁面中放一張底圖，可以滑動這張底圖，也可以放大顯示這個底圖，形式上類似百度地圖的操作一樣。找了找資料，發(fā)現(xiàn)使用movable-area和movable-view配合起來使用能實現(xiàn)這樣的效果。示例代碼如下：
代碼
<template>
<view class="my-page-wrap">
<movable-area class="map-area-wrap" :scale-area="true">
<movable-view
class="map-show-wrap"
:scale="true"
:out-of-bounds="true"
:scale-min="1"
:scale-max="2"
direction="all"
>
<view class="map-image-wrap">
<image class="map-image" mode="widthFix" :src="mapImageUrl"></image>
</view>
</movable-view>
</movable-area>
</view>
</template>
<script>
export default {
data() {
return {
//底圖圖片
mapImageUrl:
this.$cnf.proResDomains.image +
'/1/20102/2023/0404/642bd75e91809qvzs.jpg'
}
}
}
</script>
<style lang="scss" scoped>
page {
width: 100%;
height: 100%;
background: #2fc4f2;
}
.my-page-wrap {
width: 100%;
height: 100%;
background: #2fc4f2;
.map-area-wrap {
width: 100%;
height: 100%;
overflow: hidden;
.map-show-wrap {
width: 150%;
height: 150%;
.map-image-wrap {
position: relative;
width: 100%;
height: 100%;
.map-image {
position: absolute;
width: 100%;
height: 100%;
display: block;
}
}
}
}
}
</style>效果
效果
注意
底圖的比例盡可能大于手機的高與寬的比值，這樣滑動的時候不會出現(xiàn)底部顯示不全。
以上就是uniapp movable-area應用的詳細內(nèi)容，更多關(guān)于uniapp movable-area應用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
現(xiàn)在遇到這樣的需求，要求輸入一個a之后會出現(xiàn)包含a的下拉列表，當我們點擊某一個的時候，搜索框中就會出現(xiàn)點擊的值。下面小編給大家分享同js和ajax實現(xiàn)百度智能搜索框，需要的的朋友參考下實現(xiàn)代碼2017-08-08
JavaScript如何將時間戳轉(zhuǎn)化為年月日時分秒格式
這篇文章主要給大家介紹了關(guān)于JavaScript如何將時間戳轉(zhuǎn)化為年月日時分秒格式的相關(guān)資料,在前端的日常工作當中,時間戳的使用也是不少的,有時后端返回給我們的數(shù)據(jù)是一個時間戳,我們需要轉(zhuǎn)換成年月日,時分秒的形式展示在頁面當中,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)動態(tài)生成表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
寄生組合式繼承,是集寄生式繼承和組合繼承的有點與一身,主要是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法,這篇文章主要給大家介紹了關(guān)于JavaScript寄生式組合繼承的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)手勢圖案鎖屏功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
BootStrap Validator使用注意事項(必看篇)
針對bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator時需要了解其注意事項，下面小編把我遇到的注意事項分享給大家，供大家參考2016-09-09
這篇文章主要介紹了JS判斷是否長按某一鍵的方法,涉及JavaScript針對鍵盤按鍵的判斷及響應操作技巧,需要的朋友可以參考下2016-03-03
今天小編就為大家分享一篇layui問題之模擬select點擊事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能代碼
這篇文章主要介紹了使用Ionic實現(xiàn)頁面下拉刷新(ion-refresher）功能的代碼，感興趣的朋友一起看看吧2016-06-06