1.小程序?swiper?組件默認(rèn)高度150px，并且如果子元素過高，swiper不會自適應(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)掉對話框</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 * 頁面的初始數(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è)小問題注意一下，就是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樣式，得出的頁面居然字體很模糊：

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

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

改過后的效果圖：

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組件、虛擬鍵盤

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

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

代碼示例：

.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è)頁面的設(shè)計(jì)也浪費(fèi)了很多時(shí)間，不知道怎么去使下方的一部分把頁面剩余的部分占完并且背景顏色改變

效果圖：

代碼示例：

.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组件自适应高度，自定义弹出层，悬浮按钮，虚拟键盘)...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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