1.小程序?swiper?組件默認(rèn)高度150px，并且如果子元素過(guò)高，swiper不會(huì)自適應(yīng)高度

? ?height:100vh;

?2.微信小程序自定義彈出層，參考網(wǎng)址：https://blog.csdn.net/haibo0668/article/details/80675895

效果圖：

示例代碼：

.wxml

1 <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> 2 3 <view class="modalDlg" wx:if="{{showModal}}"> 4 <text class='textm'>驗(yàn)證碼：1234</text> 5 <button bindtap="go" class='btnoff'>點(diǎn)我可以關(guān)掉對(duì)話框</button> 6 7 </view> 8 9 <button bindtap="submit">點(diǎn)我彈窗</button>

.wxss

1 .mask{ 2 width: 100%; 3 height: 100%; 4 position: fixed; 5 top: 0; 6 left: 0; 7 background: #000; 8 z-index: 9000; 9 opacity: 0.7; 10 } 11 12 .modalDlg{ 13 padding-top: 50rpx; 14 width: 480rpx; 15 height:320rpx; 16 position: fixed; 17 top: 50%; 18 left:50%; 19 transform: translate(-50%,-50%); 20 z-index: 9999; 21 background-color: #fff; 22 display: flex; 23 flex-direction: column; 24 align-items: center; 25 justify-content: center; 26 } 27 .btnoff{ 28 margin-top: 100rpx; 29 } 30 .textm{ 31 /* margin-top: 60rpx; */ 32 color: #333; 33 font-size: 32rpx; 34 }

.js

1 Page({ 2 3 /** 4 * 頁(yè)面的初始數(shù)據(jù) 5 */ 6 data: { 7 showModal: false 8 }, 9 submit: function () { 10 this.setData({ 11 showModal: true 12 }) 13 }, 14 preventTouchMove: function () { 15 16 }, 17 18 19 go: function () { 20 this.setData({ 21 showModal: false 22 }) 23 } 24 })

這里還有一個(gè)小問(wèn)題注意一下，就是css3使用transform出現(xiàn)字體模糊的解決辦法，比如我在項(xiàng)目中遇到的奇怪現(xiàn)象：

?

css代碼示例：

.wxss

1 .modalDlg{ 2 padding-top: 20rpx; 3 width: 205px; 4 height: 126px; 5 position: fixed; 6 top: 50%; 7 left:50%; 8 transform: translate(-50%,-50%); 9 z-index: 9999; 10 background-color: #fff; 11 display: flex; 12 flex-direction: column; 13 align-items: center; 14 justify-content: center; 15 }

上面這css樣式，得出的頁(yè)面居然字體很模糊：

上網(wǎng)查了一下，把width和height改成偶數(shù)就可以了，具體為什么我也不清楚，然后照著改就真的不會(huì)模糊了0.0

1 width: 204px; 2 height: 126px;

改過(guò)后的效果圖：

3.微信小程序懸浮按鈕，參考網(wǎng)址：https://blog.csdn.net/qq_36530458/article/details/80006210

效果圖：

?

代碼示例：?

.wxml

1 <view bindtap='adddetial'> 2 3 <image class="add_icon" src="/assets/img/file.png"></image> 4 5 </view>

.wxss

1 position:fixed; 2 width:42px; 3 height:42px; 4 bottom:30px; 5 right:20px; 6 }

.js

1 adddetial: function () { 2 3 wx.navigateTo({ 4 5 url: '/pages/TempFile/TempFile', 6 7 success: function (res) { }, 8 9 fail: function (res) { }, 10 11 complete: function (res) { }, 12 13 }) 14 15 },

4.微信小程序仿input組件、虛擬鍵盤(pán)

可以參考這個(gè)網(wǎng)址：https://www.imooc.com/article/29170

5.微信小程序--實(shí)現(xiàn)按鈕跳轉(zhuǎn)另一個(gè)頁(yè)面

代碼示例：

.wxml

1 <view class='day-weather' bindtap='onTapDayWeather'> 2 </view>

.js

1 onTapDayWeather(){ 2 wx.navigateTo({ 3 url: '/pages/list/list', 4 }) 5 }

6.還有一個(gè)頁(yè)面的設(shè)計(jì)也浪費(fèi)了很多時(shí)間，不知道怎么去使下方的一部分把頁(yè)面剩余的部分占完并且背景顏色改變

效果圖：

代碼示例：

.wxml

1 <view class="container-smf"> 2 <text class="explain">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text> 3 <view class="summit-content"> 4 <form class='form-smf'> 5 <input name="input" type='text' class='input-number' /> 6 <button form-type='summit'>確認(rèn)</button> 7 </form> 8 <text class='explain'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text> 9 </view> 10 </view>

.wxss

1 .container-smf{ 2 position: fixed; 3 top: 0; 4 left: 0; 5 right: 0; 6 } 7 .summit-content{ 8 padding-top: 20rpx; 9 display: block; 10 background: #fff; 11 height: 100vh; 12 }

?

轉(zhuǎn)載于:https://www.cnblogs.com/zrcassiel/p/9856431.html

總結(jié)

以上是生活随笔為你收集整理的微信小程序项目实战知识点总结(swiper组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。