當前位置：首頁 » APP程序 » 小程序flex

小程序flex

發布時間: 2021-03-15 20:15:44

⑴ 微信小程序盒子上面怎麼消除間隙

1；vertical-align: top; 就可以來了源或者在 .surfaceTopImage 裡面加上 vertical-align: middle;
2；用flex布局（推薦）
.surfaceTop {display: flex;flex-direction: row;align-items: center;}

⑵ 微信小程序滑動選擇器怎麼實現

組件說明：
picker：
滾動選擇器，現支持三種選擇器，通過mode屬性來區分，分別是普通選擇器(mode = selector)，時間選擇器(mode = time)，日期選擇器(mode = date)，默認是普通選擇器。

⑶ 小程序丨【已解決】不同手機，小程序顯示不一樣，這是小程序bug還是我的代碼有問題

你的代碼問題
這種自適應屏幕問題請確認你使用了微信推薦的像素單位：rpx，然後建議布局使用flex。因為目前我做的小程序還沒發現不同機型布局錯亂的問題，所以才說是你的代碼沒寫好

⑷ 微信小程序這個效果怎麼做

test.wxml:

html"><viewclass="main">
<viewclass="back">
<viewclass="menu">
<text>第一個item1</text>
<text>第二個</text>
<text>第三個item3</text>
<text>第四個item4</text>
</view>
</view>
<viewclass="front"animation="{{animationData}}">
<textclass="btn"bindtap='move'>三</text>
</view>
</view>

test.wxss

.main{
position:relative;
width:100vw;
height:100vh;
}

.back{
width:100vw;
height:100vh;
background-color:#448;
}

.back.menu{
display:flex;
flex-direction:column;
color:#fff;
}

.front{
position:absolute;
width:25vw;
height:100vh;
right:0;
top:0;
overflow:hidden;
background-color:#88f;
}

.front.btn{
position:absolute;
left:20rpx;
top:0;
font-size:60rpx;
color:#fff;
}

test.js:

varww=0

Page({
data:{
animationData:{}
},
move:function(){
varanimation=wx.createAnimation()
ww=ww==100?25:100
animation.width(ww+"vw").step()
this.setData({
animationData:animation.export()
})
}
})

⑸ 微信小程序，在屏幕下面用position：flex做一個導航欄，css樣式是top：89%；iphone5正常，iphon6多出空白

鑒於手機高度不一樣，你想要置底的話，不要用top，用bottom

⑹ 微信小程序裡面float對於view標簽不好使嗎

用 justify-content: flex-end來布局

⑺ 微信小程序，小程序論壇，weixin，view內容怎麼樣居右顯示

你是在找微信小程序論壇嗎？能否說具體一點。
第九程序開發者論壇有你提到的東西，應該可以幫助你。
望點贊，謝謝！

⑻ 小程序怎麼做table切換效果

wxml代碼：
<view class="container">
<view class="table">
<view class="tr">
<view class="th">標題1</view>
<view class="th">標題2</view>
<view class="th">標題3</view>
<view class="th">標題4</view>
<view class="th">標題5</view>
</view>
<view class="tr" wx:for="{{5}}">
<view class="td">{{內容}}</view>
<view class="td">{{內容}}</view>
<view class="td">{{內容}}</view>
<view class="td">{{內容}}</view>
<view class="td">{{內容}}</view>
</view>
</view>
</view>

wxss代碼：
/* pages/table/table.wxss */
page {
font-size: 14px;
color: #333
}
.table {
border:1px solid #dadada;
border-right: 0;
border-bottom: 0;
width: 98%;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.th,.td {
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width:100%
}
.th {
font-weight: 400;
background-color: #dadada
}

⑼ 如何在安卓手機微信小程序里實現Flex布局

最初打算使用scroll-view實現，效果好、流暢、有慣性滑動，但由於滾動條沒法去掉、無法實現上下層的幀布局，最終放棄了。還是自己寫個吧，利用手勢事件。遺憾的是小程序中目前沒有像Android中快速滑動事件，所以，要實現慣性滑動是不可能了。 item的布局：推薦小程序優先使用flex布局，完全夠用。這也是微信推薦的。 <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTeam/images/20150928/tooopen_sy_143912755726.jpg" mode="scaleToFill"></image> <view class="number-wrapper"> <text class="name">{{cardTeam.name}}</text> <view class="count-wrapper"> <view class="decrease-btn">-</view> <text class="count">1</text> <view class="increase-btn">+</view> </view> <view class="price-wrapper"> <text class="unit">¥</text> <text class="price">99.80</text> </view> </view> <view class="ok"><view class="inner-ok">確定</view></view> <view class="remove" data-id="{{cardTeam.id}}" bindtap="delItem"><view>刪除</view></view> </view> 主要是將刪除按鈕的設為絕對定位(position: absolute)： .item .remove{ width: 60px; height: 100%; background-color: red; position: absolute; top: 0; right: -60px; display: flex; justify-content: center; align-items: center; } Page({ data: { cardTeams:[{"id":"aaaaa", "name":"android教程", "url":"", "right":0, "startRight":0},{"id":"bbbb", "name":"小程序教程", "url":"", "right":0, "startRight":0}] }, drawStart : function(e){ // console.log("drawStart"); var touch = e.touches[0]; startX = touch.clientX; startY = touch.clientY; var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; data.startRight = data.right; } key = true; }, drawEnd : function(e){ console.log("drawEnd"); var cardTeams = this.data.cardTeams; for(var i in cardTeams){ var data = cardTeams[i]; if(data.right <= 100/2){ data.right = 0; }else{ data.right = maxRight; } } this.setData({ cardTeams:cardTeams }); }, drawMove : function(e){ //console.log("drawMove"); var self = this; var dataId = e.currentTarget.id; var cardTeams = this.data.cardTeams; if(key){ var touch = e.touches[0]; endX = touch.clientX; endY = touch.clientY; console.log("startX="+startX+" endX="+endX ); if(endX - startX == 0) return ; var res = cardTeams; //從右往左 if((endX - startX) < 0){ for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = startX - endX; startRight += change; if(startRight > maxRight) startRight = maxRight; res[k].right = startRight; } } }else{//從左往右 for(var k in res){ var data = res[k]; if(res[k].id == dataId){ var startRight = res[k].startRight; var change = endX - startX; startRight -= change; if(startRight < 0) startRight = 0; res[k].right = startRight ; } } } self.setData({ cardTeams:cardTeams }); } }, //刪除item delItem: function(e){ var dataId = e.target.dataset.id; console.log("刪除"+dataId); var cardTeams = this.data.cardTeams; var newCardTeams = []; for(var i in cardTeams){ var item = cardTeams[i]; if(item.id != dataId){ newCardTeams.push(item); } } this.setData({ cardTeams:newCardTeams }); }, onLoad: function () { console.log('onLoad:'+app.globalData.domain) } }) drawStart用於記錄手指觸碰時的位置，drawMove記錄手指滑動的位置，兩者的差值就是刪除按鈕的偏移量 drawEnd手指抬起時觸發，用於設置彈回、攤開效果。目前我的是超過一半自動彈開，不足一半自動收回。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

閱讀全文

小程序flex

與小程序flex相關的閱讀推薦