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

<samp id="60iw2"></samp>

^{<rt id="60iw2"></rt>}

<rt id="60iw2"><blockquote id="60iw2"></blockquote></rt>

<center id="60iw2"><blockquote id="60iw2"></blockquote></center>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式

2年前作者：java小白沖刺者分類：Toy博客閱讀(24)違法舉報

這篇具有很好參考價值的文章主要介紹了【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式

第四章微信小程序用頁面樣式

前言

本章節(jié)主要講解，小程序中常用樣式，涉及到WXML和WXSS文件。例如：頁面布局、整體樣式、按鈕、圖片輪播、條件渲染（wx:if wx:for）等。

一、總體樣式–全局樣式and局部樣式

1.全局樣式

微信小程序頂層的app.wxss文件，代表小程序全局樣式，作用于所有頁面。采用CSS語法設(shè)置頁面樣式。
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
??我們通過代碼來演示
??????在最頂層的app.wxss文件中設(shè)置整個頁面背景為紫色，<text>標(biāo)簽的字體為30磅，顏色字體為粉紅色。

page {
  background-color: blueviolet;
}

text{
  font-size: 30pt;
  color: pink;
}

小程序第一頁
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
??????頁面跳轉(zhuǎn)

<view>
<navigator url="../home/home">跳轉(zhuǎn)到第二頁</navigator>
</view>

小程序第二頁
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

2.局部樣式

在頁面文件內(nèi)創(chuàng)建的.wxss文件為局部樣式，只作用于當(dāng)前頁面。
??????注：當(dāng)局部樣式和全局樣式?jīng)_突時，根據(jù)就近原則，局部樣式會覆蓋全局樣式。
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
??我們通過代碼來演示
??????把home文件中的home.wxss文件中設(shè)置整個頁面背景為黑色，<text>標(biāo)簽的字體為30磅，顏色字體為白色。

home.wxss代碼

/* pages/home/home.wxss */

page {
  background-color: black;
}

text{
  font-size: 30pt;
  color: white;
}

首頁
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
第二頁

二、Flex布局

各種頁面元素的位置關(guān)系，稱為布局（layout），小程序官方推薦使用 Flex 布局。如果有想了解Flex布局的同學(xué)，可以看阮一峰老師的《Flex 布局教程》。

??我們通過代碼來演示
在home.wxss文件中加入以下代碼

page {
  height: 100%;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
下面解釋一下上面這段 WXSS 代碼，還是很簡單的。

（1）height: 100%;：頁面高度為整個屏幕高度。
（2）width: 750rpx;：頁面寬度為整個屏幕寬度。
（3）display: flex;：頁面（home）采用 Flex 布局。
（4）justify-content: center;：頁面的一級子元素（這個示例是< view>）水平居中。
（5）align-items: center;：頁面的一級子元素（這個示例是< view>）垂直居中。一個元素同時水平居中和垂直中央，就相當(dāng)于處在頁面的中央了。

??????rpx單位

通過上面的代碼示例我們發(fā)現(xiàn)設(shè)置高度和寬度的單位是rpx，那rpx和px之間的有什么關(guān)系呢？
①rpx簡介
rpx（responsive pixel）是微信小程序用來解決屏幕適配的尺寸單位。

②rpx原理
rpx實現(xiàn)原理：因為不同的手機屏幕大小不同，為了使小程序適應(yīng)所有設(shè)備，rpx把所有的設(shè)備屏幕寬度分為750份（任何設(shè)備的屏幕總寬度為750rpx）。在較小的設(shè)備上，1rpx所代表的寬度較小；較大的設(shè)備上，1rpx所代表的寬度較大。

小程序在不同設(shè)備上運行時，就會把 rpx 的樣式單位換算成對應(yīng)的像素單位（px）來渲染，從而實現(xiàn)屏幕適配。

③rpx和px之間的單位換算
小程序官方建議：開發(fā)小程序時，可以用IPhone6作為視覺稿的標(biāo)準(zhǔn)。
因為IPhone6，屏幕寬度為375px，換算成rpx:

設(shè)備	rpx換算px	px換算rpx
IPhone6	1rpx=0.5px	1px=2rpx

三、樣式導(dǎo)入

使用WXSS提供的@import語法，可以導(dǎo)入樣式表。
??我們通過代碼來演示
項目結(jié)構(gòu)
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

index.wxss中加入使字體變綠的樣式

/**index.wxss**/
.indexss{
  font-size: 30pt;
  color: green;
}

home.wxml引入樣式

<view>
  <text class="indexss">第二頁</text>
</view>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
我們發(fā)現(xiàn)并沒有改變
在home.wxss中引入index.wxss

@import"../index/index.wxss"

字體顏色發(fā)生了變化
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

四、常用按鈕樣式

小程序按鈕使用<button> </button>閉合標(biāo)簽。
按鈕基本屬性，更多屬性可以查看小程序官網(wǎng) button

屬性	類型	默認(rèn)值	必填	說明
size	string	default	否	按鈕的大小
type	string	default	否	按鈕的樣式類型
plain	boolean	false	否	按鈕是否鏤空，背景色透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名稱前是否帶 loading 圖標(biāo)
form-type	string		否	用于 form 組件，點擊分別會觸發(fā) form 組件的 submit/reset 事件
open-type	string		否	微信開放能力

??我們通過代碼來演示
??????type屬性指定按鈕的顏色類型

<!-- 通過type屬性指定按鈕顏色類型 -->
<button >普通按鈕</button>
<button type="default" >默認(rèn)按鈕</button>
<button type="primary">主色調(diào)</button>
<button type=warn">警告</button>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

??????size屬性指定按鈕的大小默認(rèn)值只有兩個

default 默認(rèn)大小
mini 小尺寸

<!-- 通過size屬性指定按鈕的大小 -->
<button size="mini" >普通按鈕</button>
<button type="default" size="default" >默認(rèn)按鈕</button>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

??????各種樣式按鈕
點擊進入
在博主“熱愛編程的小白白”文章中看到此網(wǎng)站，很優(yōu)秀。感謝大佬的文章
選擇自己喜歡的按鈕
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

把CSS和HTML直接復(fù)制到wxss和wxml中
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
index.wxss

.btn {
  display: block;
  padding: 0.7em 1em;
  background: transparent;
  outline: none;
  border: 0;
  color: #d4af37;
  letter-spacing: 0.1em;
  font-family: monospace;
  font-size: 17px;
  font-weight: bold;
  z-index: 1;
 }
 
 .cube {
  position: relative;
  transition: all 0.5s;
 }
 
 .cube .bg-top {
  position: absolute;
  height: 10px;
  background: #d4af37;
  bottom: 100%;
  left: 5px;
  right: -5px;
  transform: skew(-45deg, 0);
  margin: 0;
  transition: all 0.4s;
 }
 
 .cube .bg-top .bg-inner {
  bottom: 0;
 }
 
 .cube .bg {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube .bg-right {
  position: absolute;
  background: #d4af37;
  top: -5px;
  z-index: 0;
  bottom: 5px;
  width: 10px;
  left: 100%;
  transform: skew(0, -45deg);
  transition: all 0.4s;
 }
 
 .cube .bg-right .bg-inner {
  left: 0;
 }
 
 .cube .bg-inner {
  background: #28282d;
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  bottom: 2px;
 }
 
 .cube .text {
  position: relative;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-inner {
  background: #d4af37;
  transition: all 0.4s;
 }
 
 .cube:hover .text {
  color: #28282d;
  transition: all 0.4s;
 }
 
 .cube:hover .bg-right,
 .cube:hover .bg,
 .cube:hover .bg-top {
  background: #28282d;
 }
 
 .cube:active {
  z-index: 9999;
  animation: bounce .1s linear;
 }
 
 @keyframes bounce {
  50% {
   transform: scale(0.9);
  }
 }

index.wxml

<button type="button" class="btn cube cube-hover">
  <div class="bg-top">
  <div class="bg-inner"></div>
  </div>
  <div class="bg-right">
  <div class="bg-inner"></div>
  </div>
  <div class="bg">
  <div class="bg-inner"></div>
  </div>
  <div class="text">Hover Me</div>
</button>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

五、圖片插入

圖片插入使用<image> </image>標(biāo)簽實現(xiàn)。
<image> </image>標(biāo)簽有很多屬性，點擊查看

屬性	類型	默認(rèn)值	必填	說明
src	string		否	圖片資源地址
mode	string	scaleToFill	否	圖片裁剪、縮放的模式
style	string		否	圖片樣式

??我們通過代碼來演示
??????通過代碼指定圖片的高度和寬度占屏幕一半

<view>
   <image src='https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' 
   style="height: 375rpx; width: 375rpx;"></image>
 </view>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

六、圖片輪播

圖片輪播使用<swiper> </swiper>標(biāo)簽實現(xiàn)
此標(biāo)簽有很多屬性

屬性	類型	默認(rèn)值	必填	說明
indicator-dots	boolean	false	否	是否顯示面板指示點
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色
indicator-active-color	color	#000000	否	當(dāng)前選中的指示點顏色
autoplay	boolean	false	否	是否自動切換
interval	number	5000	否	自動切換時間間隔
circular	boolean	false	否	是否采用銜接滑動

??我們通過代碼來演示
??????通過代碼實現(xiàn)圖片輪播
這里我們直接引用《阮一峰老師的例子》

<view>
  <swiper
    indicator-dots="{{true}}"  
    autoplay="{{true}}"
    style="width: 750rpx;"
    indicator-active-color="#000000">
    <swiper-item>
      <image src="https://picsum.photos/200"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/250"></image>
    </swiper-item>
    <swiper-item>
      <image src="https://picsum.photos/300"></image>
    </swiper-item>
  </swiper>
</view>

上述代碼中，**< swiper>組件就是輪播組件，里面放置了三個< swiper-item>組件，表示有三個輪播項目，每個項目就是一個< image>**組件。
【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

七、圖片滾動

圖片滾動使用<scroll-view> </scroll-view>標(biāo)簽實現(xiàn)
??我們通過代碼來演示
??????通過代碼實現(xiàn)縱向滾動
home.wxss

.container_2 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container_2 view:nth-child(1){
background-color: red;
}
.container_2 view:nth-child(2){
  background-color: yellowgreen;
}
.container_2 view:nth-child(3){
  background-color: blue;
}
.container_2{
  display: flex;
  justify-content: space-around
}
 
.container_2{
  border: 1px solid yellowgreen;
  height: 130px;
  width: 100px;
}

home.wxml

<scroll-view class="container_2" scroll-y>
 <view>G</view>
<view>C</view>
<view>L</view>
</scroll-view>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

八、條件渲染

條件渲染使用<wx:if> </wx:if> <wx:for> </wx:for>標(biāo)簽實現(xiàn)

1.< wx:if>

??我們通過代碼來演示
??????通過代碼實現(xiàn)wx:if
index.wxml

<button wx:if="{{flag==0}}">普通按鈕</button>
<button type="default" wx:elif="{{flag==1}}">默認(rèn)按鈕</button>
<button type="primary" wx:elif="{{flag==2}}">主色調(diào)</button>
<button type=warn" wx:else>警告</button>

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 1
  }
})

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序
當(dāng)我們把flag改為10

index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10
  }
})

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

??????一次性通過<wx:if>控制多個組件，使用<block>

<block wx:if="{{flag==10}}">
  <button type="default">默認(rèn)按鈕</button>
  <button type="primary">主色調(diào)</button>
</block>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

??????注：wx:if 與 hidden不同

wx:if 使用動態(tài)創(chuàng)建和移除元素的方式控制
hidden使用切換樣式方式控制

2.< wx:for>

該標(biāo)簽有很多屬性

屬性	類型	默認(rèn)值	必填	說明
wx:for-index	string		否	指定當(dāng)前循環(huán)項的索引變量名
wx:for-item	string		否	指定當(dāng)前項變量名
wx:key	string		否	指定當(dāng)前數(shù)組key

??????通過代碼實現(xiàn)< wx:for>
當(dāng)我們引入js中數(shù)組時，可以通過index得到索引，通過item得到內(nèi)容
index.js

Page({
  data: {
    now: (new Date()).toLocaleString(),
    flag: 10,
    arry:['java','pyhton','C++']
  }
})

index.wxml

<view wx:for="{{arry}}">
 數(shù)組索引為:{{index}}，內(nèi)容為:{{item}}
</view>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

??????wx:for-index于wx:for-item使用
index.wxml

<view wx:for="{{arry}}" wx:for-index="id" wx:for-item="name"> 
 數(shù)組索引為:{{id}}，內(nèi)容為:{{name}}
</view>

【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式,前端,vue,微信小程序,notepad++,小程序

總結(jié)

本文通過很多代碼示例來展示了小程序常用頁面樣式，這里非常感謝阮一峰老師和小白白大佬的博客，下一章我們講解JSON文件配置小程序?qū)Ш綑谛畔⒌取?span toymoban-style="hidden">文章來源地址http://www.zghlxwxcb.cn/news/detail-568906.html

到了這里，關(guān)于【微信小程序創(chuàng)作之路】- 小程序常用頁面樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

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

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

uni-app框架微信小程序頁面顯示正常，但安卓頁面樣式顯示異常
今天在繼續(xù)復(fù)習(xí)uni-app項目時，使用模擬器運行時，突然發(fā)現(xiàn)封裝的search組件樣式無法正常顯示，但是小程序頁面又是正常的，打包后真機也是一樣的結(jié)果。在uni-app的控制臺報如下錯誤: [Vue warn]: Error in render: “TypeError: Cannot read property ‘children’ of undefined” TypeError: Cannot rea
2024年04月11日
瀏覽(27)
微信小程序之WXSS模板樣式、頁面配置（.json）和網(wǎng)絡(luò)數(shù)據(jù)請求
學(xué)習(xí)的最大理由是想擺脫平庸，早一天就多一份人生的精彩；遲一天就多一天平庸的困擾。各位小伙伴，如果您：想系統(tǒng)/深入學(xué)習(xí)某技術(shù)知識點… 一個人摸索學(xué)習(xí)很難堅持，想組團高效學(xué)習(xí)… 想寫博客但無從下手，急需寫作干貨注入能量… 熱愛寫作，愿意讓自己成為更好
2024年01月24日
瀏覽(27)
微信小程序常用頁面監(jiān)聽跳轉(zhuǎn)方法
使用wx.navigateTo(Object object)方法跳轉(zhuǎn)，此跳轉(zhuǎn)方法會保留當(dāng)前頁面，將跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，特別注意，此方法不能跳到 tabbar 頁面，也就是咱們常用的底部菜單欄對應(yīng)的tabbar 頁面。具體示例代碼：這只是常見的用法，如果需要數(shù)據(jù)回調(diào)，可參考微信官方文檔。 2. 使用
2024年02月13日
瀏覽(17)
微信小程序的頁面制作---常用組件及其屬性2
在全局配置文件app.json中添加taBar配置，可實現(xiàn)標(biāo)簽欄配置。標(biāo)簽欄最少2個，最多5個（1）如何配置標(biāo)簽欄？ 1》先建多個文件，（以我的index，list，myform文件夾為例） 2》在app.json這個全局配置文件里面配置taBar，（必填taBar配置項——color、selectedColor、backgroundColor、list） 3》
2024年04月13日
瀏覽(24)
微信小程序 - 頁面插入添加 Banner 廣告超詳細教程（支持自定義樣式、位置、大小等）及注意事項
如果您需要點擊彈出的廣告，請訪問：微信小程序 - 頁面插入廣告（激勵式廣告）。本文將從 0-1 完成整個過程，您只需要按照步驟操作即可，代碼干凈整潔注釋詳細，快速將代碼移植到您的微信小程序項目中，如下圖所示，底部 Banner 式卡片廣告，您可以將其嵌入到任何
2024年02月08日
瀏覽(201)
uni-app寫微信小程序input獲取焦點部分安卓機頁面不彈起問題(彈起一點焦點樣式問題)
以上代碼是一個自己封裝的一個輸入框組建以上是問題出現(xiàn)的關(guān)鍵,沒有設(shè)置行高設(shè)置行高后就解決了問題,具體原因不詳
2024年02月11日
瀏覽(25)
微信小程序詳細講解頁面?zhèn)髦?，globalData，wx，web前端開發(fā)基礎(chǔ)
在其他非app.js文件中修改： var app = getApp() ? app.globalData.hasLogin = true 二、使用 wx.navigateTo 與 wx.redirectTo 的時候，可以將部分?jǐn)?shù)據(jù)放在 url 里面，并在新頁面 onLoad 的時候初始化 // Navigate wx.navigateTo({ url: ‘…/pageD/pageD?name=raymondgender=male’, }) ? // Redirect wx.redirectTo({ url: ‘…/p
2024年04月25日
瀏覽(23)
Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基礎(chǔ)頁面框架的靜態(tài)設(shè)計(二)
Gpt微信小程序搭建的前后端流程 - 前端小程序部分-1.基礎(chǔ)頁面框架的靜態(tài)設(shè)計(二) 在開始這個專欄，我們需要找一個小程序為參考，參考和仿照其界面，聊天交互模式。這里參考小程序- 小檸AI智能聊天，可自行先體驗。該小程序主要提供了以下幾點功能向需求 : 每天免費
2024年02月14日
瀏覽(21)
CSS樣式前端HTML頁面常用CSS效果實現(xiàn)及其相關(guān)配置信息------前端入門基礎(chǔ)教程
!DOCTYPE html !-- 這是HTML的注釋 -- html lang=\\\"en\\\" id=\\\"myHtml\\\" ?? ?head ?? ??? ?!-- 這里不是設(shè)置了編碼,而是告訴瀏覽器,用什么編碼方式打開文件避免亂碼 -- ?? ??? ?meta charset=\\\"UTF-8\\\" ?? ??? ?meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" ?? ??? ?titleHtmlAll/title ?? ??? ?
2024年02月05日
瀏覽(35)
微信小程序：布局樣式
2024年02月04日
瀏覽(19)