【愚公系列】2022年03月 微信小程序-視圖容器

前言

視圖容器

一、cover-image

覆蓋在原生組件之上的圖片視圖。可覆蓋的原生組件同cover-view，支持嵌套在cover-view里。

二、cover-view

覆蓋在原生組件之上的文本視圖

可覆蓋的原生組件包括 map、video、canvas、camera、live-player、live-pusher

Page({ onShareAppMessage() { return { title: 'cover-view', path: 'page/component/pages/cover-view/cover-view' } }, data: { latitude: 23.099994, longitude: 113.324520, } })

.cover-view { position: absolute; top: calc(50% - 150rpx); left: calc(50% - 300rpx); /* opacity: .7; */ } .flex-wrp{ display:flex; } .flex-item{ width: 200rpx; height: 300rpx; font-size: 26rpx; } .demo-text-1 { background: rgba(26, 173, 25, 0.7); } .demo-text-2 { background: rgba(39, 130, 215, 0.7); } .demo-text-3 { background: rgba(255, 255, 255, 0.7); }

三、match-media

media query 匹配檢測節點。可以指定一組 media query 規則，滿足時，這個節點才會被展示。

當頁面寬度在 300 ~ 500 px 之間時展示這里 當頁面高度不小于 400 px 且屏幕方向為縱向時展示這里

四、movable-area和movable-view

movable-area和movable-view的可移動區域。

Page({ onShareAppMessage() { return { title: 'movable-view', path: 'page/component/pages/movable-view/movable-view' } }, data: { x: 0, y: 0, scale: 2, }, tap() { this.setData({ x: 30, y: 30 }) }, tap2() { this.setData({ scale: 3 }) }, onChange(e) { console.log(e.detail) }, onScale(e) { console.log(e.detail) } })

movable-view區域小于movable-area text 點擊移動到 (30px, 30px) movable-view區域大于movable-area text 只可以橫向移動 text 只可以縱向移動 text 可超出邊界 text 帶有慣性 text 可放縮 text 點擊放大3倍

五、page-Container

頁面容器。

小程序如果在頁面內進行復雜的界面設計（如在頁面內彈出半屏的彈窗、在頁面內加載一個全屏的子頁面等），用戶進行返回操作會直接離開當前頁面，不符合用戶預期，預期應為關閉當前彈出的組件。 為此提供“假頁”容器組件，效果類似于 popup 彈出層，頁面內存在該容器時，當用戶進行返回操作，關閉該容器不關閉頁面。返回操作包括三種情形，右滑手勢、安卓物理返回鍵和調用 navigateBack 接口。

page { background-color: #f7f8fa; color: #323232; width: 100%; height: 100%; } .box { margin: 0 12px; } .title { margin: 0; padding: 32px 16px 16px; color: rgba(69, 90, 100, 0.6); font-weight: normal; font-size: 18px; line-height: 20px; text-align: center; } .btn { display: block; width: 100%; margin: 10px 0; background-color: #fff; } .detail-page { width: 100%; height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; }

const app = getApp() Page({ data: { show: false, duration: 300, position: 'right', round: false, overlay: true, customStyle: '', overlayStyle: '' }, onLoad: function () { console.log('代碼片段是一種迷你、可分享的小程序或小游戲項目，可用于分享小程序和小游戲的開發經驗、展示組件和 API 的使用、復現開發問題和 Bug 等。可點擊以下鏈接查看代碼片段的詳細文檔：') console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html') }, onShow() { }, popup(e) { const position = e.currentTarget.dataset.position let customStyle = '' let duration = this.data.duration switch(position) { case 'top': case 'bottom': customStyle = 'height: 30%;' break case 'right': break } this.setData({ position, show: true, customStyle, duration }) }, changeRound() { this.setData({round: !this.data.round}) }, changeOverlay() { this.setData({overlay: !this.data.overlay, show: true}) }, changeOverlayStyle(e) { let overlayStyle = '' const type = e.currentTarget.dataset.type switch(type) { case 'black': overlayStyle = 'background-color: rgba(0, 0, 0, 0.7)' break case 'white': overlayStyle = 'background-color: rgba(255, 255, 255, 0.7)' break case 'blur': overlayStyle = 'background-color: rgba(0, 0, 0, 0.7); filter: blur(4px);' } this.setData({overlayStyle, show: true}) }, exit() { this.setData({show: false}) // wx.navigateBack() }, goTo(e) { wx.navigateTo({url: `../shareElement/index`}) }, onBeforeEnter(res) { console.log(res) }, onEnter(res) { console.log(res) }, onAfterEnter(res) { console.log(res) }, onBeforeLeave(res) { console.log(res) }, onLeave(res) { console.log(res) }, onAfterLeave(res) { console.log(res) }, onClickOverlay(res) { console.log(res) } })

彈出位置 右側彈出 頂部彈出 底部彈出 中央彈出 彈窗圓角 設置{{round ? '直角' : '圓角'}} 遮罩層 設置{{overlay ? '無' : '有'}}遮罩 黑色半透明遮罩 白色半透明遮罩 模糊遮罩 推出

六、scroll-view

可滾動視圖區域。使用豎向滾動時，需要給scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px

const order = ['demo1', 'demo2', 'demo3'] Page({ onShareAppMessage() { return { title: 'scroll-view', path: 'page/component/pages/scroll-view/scroll-view' } }, data: { toView: 'green' }, upper(e) { console.log(e) }, lower(e) { console.log(e) }, scroll(e) { console.log(e) }, scrollToTop() { this.setAction({ scrollTop: 0 }) }, tap() { for (let i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1], scrollTop: (i + 1) * 200 }) break } } }, tapMove() { this.setData({ scrollTop: this.data.scrollTop + 10 }) } })

Vertical Scroll\n縱向滾動 Horizontal Scroll\n橫向滾動

.page-section-spacing{ margin-top: 60rpx; } .scroll-view_H{ white-space: nowrap; } .scroll-view-item{ height: 300rpx; } .scroll-view-item_H{ display: inline-block; width: 100%; height: 300rpx; }

七、share-element

共享元素。

共享元素是一種動畫形式，類似于 flutter Hero動畫，表現為元素像是在頁面間穿越一樣。該組件需與 page-Container 組件結合使用。

使用時需在當前頁放置 share-element 組件，同時在 page-container 容器中放置對應的 share-element 組件，對應關系通過屬性值 key 映射。當設置 page-container 顯示時，transform 屬性為 true 的共享元素會產生動畫。當前頁面容器退出時，會產生返回動畫。

Click Me

import {contacts} from '../data/contact' Page({ /** * 頁面的初始數據 */ data: { contacts, contact: contacts[0], transformIdx: 0, position: 'center', duration: 300, show: false, overlay: false }, showNext(e) { const idx = e.currentTarget.dataset.idx this.setData({ show: true, contact: contacts[idx], transformIdx: idx }) }, showPrev() { this.setData({ show: false }) }, onBeforeEnter(res) { console.log(res) }, onEnter(res) { console.log(res) }, onAfterEnter(res) { console.log(res) }, onBeforeLeave(res) { console.log(res) }, onLeave(res) { console.log(res) }, onAfterLeave(res) { console.log(res) }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })

/* app css stylesheet */ page { color: #333; background-color: #ddd; overflow: hidden; } button { border: 0 solid #0010ae; background-color: #1f2afe; color: #fff; font-size: 120%; padding: 8px 16px; outline-width: 0; -webkit-appearance: none; box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2); } .screen { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 16px; -webkit-overflow-scrolling: touch; } .contact { position: relative; padding: 16px; background-color: #fff; width: 100%; height: 100%; box-sizing: border-box; } .avatar { position: absolute; top: 16px; left: 16px; font-size: 0; } .name { height: 65px; font-size: 2em; font-weight: bold; text-align: center; margin: 10px 0; } .list { padding-top: 8px; padding-left: 32px; } .screen1 { overflow-y: scroll; padding: 0; } .screen1 .contact { margin: 16px; height: auto; width: auto; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2); } .screen2-button { display: block; margin: 24px auto; } .paragraph { -webkit-transition: transform ease-in-out 300ms; transition: transform ease-in-out 300ms; -webkit-transform: scale(0.6); transform: scale(0.6); } .enter.paragraph { transform: none; }

八、swiper和swiper-item

滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行為。

Page({ onShareAppMessage() { return { title: 'swiper', path: 'page/component/pages/swiper/swiper' } }, data: { background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], indicatorDots: true, vertical: false, autoplay: false, interval: 2000, duration: 500 }, changeIndicatorDots() { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay() { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange(e) { this.setData({ interval: e.detail.value }) }, durationChange(e) { this.setData({ duration: e.detail.value }) } })

指示點 自動播放 幻燈片切換時長(ms) {{duration}} 自動播放間隔時長(ms) {{interval}}

指示點 自動播放 幻燈片切換時長(ms) {{duration}} 自動播放間隔時長(ms) {{interval}}

容器 小程序

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。