国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

【微信小程序】動態(tài)修改page的wxss樣式/scroll-view使用/監(jiān)聽子組件

這篇具有很好參考價值的文章主要介紹了【微信小程序】動態(tài)修改page的wxss樣式/scroll-view使用/監(jiān)聽子組件。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

動態(tài)修改page的wxss樣式

靜態(tài)寫法

直接使用下面的寫法,是靜態(tài)的。

page {
    background: #000;
}

動態(tài)寫法

在wxml最外層套一個自己定義的page的class。

<view class="page"></view>

.page {
  display: block;
  min-height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

如果想修改.page的樣式,再用普通的動態(tài)class判斷改變就可以了。

例如:改變背景顏色

<view class='page {{isLightMode?"":"page-night"}}'></view>

isLightMode在js里控制

.page-night{
    background: #000;
}

參考:微信小程序如何動態(tài)修改page標簽的css樣式

scroll-view 錨點定位

  • 設置id時需要注意下:id 的設置要求是字母開頭,且只能包含字母、數(shù)字、中劃線、下劃線、英文冒號和英文句點。
  • scroll-view 必須有固定的高度,如果設置高度為百分比的話,父容器一定要固定高度,否則無效
    參考:可以做類似電商錨點跳轉效果?

監(jiān)聽子組件

參考:小程序父子組件直接的通信以及實時觸發(fā)子組件數(shù)據(jù)更新這篇講得簡單易懂。

// 寫法一:可以監(jiān)聽多個屬性
observers: {
    'canvasUrl'(data){  // canvasUrl: 父組件傳遞過來的值
      console.log('路徑變化了')
    }
  },

父組件數(shù)據(jù)更新,子組件也跟著變化文章來源地址http://www.zghlxwxcb.cn/news/detail-744052.html

到了這里,關于【微信小程序】動態(tài)修改page的wxss樣式/scroll-view使用/監(jiān)聽子組件的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • 微信小程序——標簽wxml、樣式wxss、js、json

    之前學過HTML,里面常用的標簽是div、span、img、a,現(xiàn)在小程序里面wxml文件里面寫結構,相對應的寫法是: div—— view span—— text img—— image a—— navigator 比如跳轉: navigator url=\\\"/pages/index/index\\\"/navigator 小程序里的樣式wxss和之前的學過的css樣式有一些區(qū)別: 新增了rpx單位,這

    2024年02月11日
    瀏覽(34)
  • 解決微信小程序dom的獲取問題,動態(tài)修改CSS樣式

    解決微信小程序dom的獲取問題,動態(tài)修改CSS樣式

    哥們兒用UNIAPP開發(fā)微信小程序的過程中,遇到這么一個組件 這是插件市場中的一個案例,作者使用的進度條是vant的Circle 環(huán)形進度條 哥們兒開心的很呀,這東西粘貼一下改改數(shù),一天的工作量不就達成了嗎? 但是因為種種原因,我還是太高估自己了,vant引入不進去! 還好哥

    2024年02月05日
    瀏覽(25)
  • 微信小程序之WXSS模板樣式、頁面配置(.json)和網(wǎng)絡數(shù)據(jù)請求

    微信小程序之WXSS模板樣式、頁面配置(.json)和網(wǎng)絡數(shù)據(jù)請求

    學習的最大理由是想擺脫平庸,早一天就多一份人生的精彩;遲一天就多一天平庸的困擾。各位小伙伴,如果您: 想系統(tǒng)/深入學習某技術知識點… 一個人摸索學習很難堅持,想組團高效學習… 想寫博客但無從下手,急需寫作干貨注入能量… 熱愛寫作,愿意讓自己成為更好

    2024年01月24日
    瀏覽(27)
  • 【微信小程序】一文搞懂條件渲染、列表渲染以及wxss模板樣式

    【微信小程序】一文搞懂條件渲染、列表渲染以及wxss模板樣式

    ??作者簡介:蘇涼(專注于網(wǎng)絡爬蟲,數(shù)據(jù)分析,正在學習前端的路上) ??博客主頁:蘇涼.py的博客 ??系列專欄:小程序開發(fā)基礎教程 ??名言警句:海闊憑魚躍,天高任鳥飛。 ??要是覺得博主文章寫的不錯的話,還望大家三連支持一下呀?。?! ??關注?點贊??收藏??

    2024年01月16日
    瀏覽(26)
  • 微信小程序通過js動態(tài)修改css樣式的方法,以及css變量

    不知道各位小帥有沒有遇到這種問題,在微信小程序開發(fā)的時候,我們想要將某個文字大小變大,那么本篇文章就是解決這個問題。

    2024年02月06日
    瀏覽(27)
  • 如何獲取data中的值?如何取出,存儲數(shù)據(jù)?跳轉外部鏈接?與非本機聯(lián)調?修改頭部標題?動態(tài)更改樣式?動態(tài)獲取設備寬高?(微信小程序)

    如何獲取data中的值?如何取出,存儲數(shù)據(jù)?跳轉外部鏈接?與非本機聯(lián)調?修改頭部標題?動態(tài)更改樣式?動態(tài)獲取設備寬高?(微信小程序)

    工具:微信開發(fā)者工具 1.如何獲取data中的值? 使用 this.data. 2.如何修改data中的值?使用 this.setData({key: value}),其中key為data中修改的數(shù)據(jù),value為要修改的值 3.如何存儲數(shù)據(jù)? 1.簡單數(shù)據(jù)wx.setStorage({ key: ‘key’,data: value} 2.對象類數(shù)據(jù)wx.setStorage({ key: ‘key’,data: {}} 4.跳轉外部

    2024年02月10日
    瀏覽(86)
  • 微信小程序修改placeholder樣式

    微信小程序有既定的修改placeholder的標簽

    2024年04月10日
    瀏覽(26)
  • 微信小程序修改radio的樣式

    微信小程序修改radio的樣式

    二: 注解: bindchange:有變化執(zhí)行事件 wx:for-items:表示對{{items}}進行循環(huán) radio中的color屬性:主要設置選中之后圖標顏色 radio中的style屬性:這里主要用來展示圖標的大,scale縮放 radio中的value屬性:主要用于事件bindchange執(zhí)行之后能獲取到值 radio中的checked屬性:設置默認值 ?

    2024年02月04日
    瀏覽(95)
  • 微信小程序修改vant組件樣式

    微信小程序修改vant組件樣式

    1 背景 在使用vant組件開發(fā)微信小程序的時候,想更改vant組件內部樣式,達到自己想要的目的(van-grid組件改成宮格背景色為透明,默認為白色),官網(wǎng)沒有示例,通過以下幾步修改成功。 2 步驟 2.1 查看官方文檔 Grid 外部樣式類 支持修改Grid組件樣式,我們在組件上添加該屬

    2024年02月09日
    瀏覽(90)
  • 微信小程序使用 checkbox 如何修改樣式?

    微信小程序使用 checkbox 如何修改樣式?

    主要通過 .wx-checkbox-input 、 .wx-checkbox-input-checked 以及 .wx-checkbox-input-checked::before 三個類名來設置 checkbox 的樣式。 .wx-checkbox-input 用于設置未選中時框的樣式 .wx-checkbox-input-checked 用于設置選中后框的樣式 ,為了覆蓋原生樣式,需要與 .wx-checkbox-input 類連寫,否則權重不夠。 .

    2024年02月12日
    瀏覽(91)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包