最近发现一个事情搞得很烦，微信小程序的弹窗内容可以滚动的时候，要保证每一次打开都在最上面，研究了一下终于发现了怎么解决第一步首先得把你的弹窗里面的内容用scroll-view标签包起来，像这样
<scroll-view style="height:592rpx" scroll-y="{{true}}" scroll-top="{{scroll}}">
</scroll-view>
这里需要注意三点1 一定要有高度，设置height2 scroll-y=“{{true}}” 一定要设置3 设置 scroll-top=“{{scroll}}”第二步填充scroll-view <scroll-view style="height:592rpx" scroll-y="{{true}}" scroll-top="{{scroll}}">
<view class="saleUnit">
<view
wx:for="{{5}}" wx:key="index" ></view>
</view>
</scroll-view>
这里需要注意的是 scroll-view 下面的元素高度不要写死，写死了没办法滑动第三步 js设置scroll在data中定义
data: {
scroll: 0,
}
在弹窗打开时设置
setTimeout(()=>{
if (this.data.scroll === 0) {
this.setData({
scroll: 0.1,
})
} else {
this.setData({
scroll: 0,
})
}
},300)
这里有两点注意这里加上setTimeout也是其中的一个bug ，猜测是没有渲染好，加上setTimeout后就生效了设置0.1也是，直接设置0时，有的情况下没办法滚动到最上面，设置0.1就解决了happy ending要是大家有更好的建议欢迎沟通噢~}

微信小程序居中、居右、横纵布局1、水平垂直居中（相对父类控件）方式一：水平垂直居中父类控件：
display: flex;
align-items: center;//子控件垂直居中
justify-content: center;//子控件水平居中
width: 100%;
height: 400px
//注意：这里的 height 写 100%会使得垂直居中可能会不生效
可能会有兼容问题方式二：水平垂直居中（方式二推荐）父类控件：position: relative;子类控件： position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
方式三：水平垂直居中（方式三推荐）父类控件： display: table-cell;
vertical-align: middle;
子类控件：margin:0 auto;方式四：水平垂直居中父类控件：position:relative;子控件： position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
可能会有兼容性问题2、水平居中水平居中A：相对父类控件 margin: 0 auto;
text-align: center;//针对行内元素
水平居中B、相对父类控件–子控件绝对定位需要知道控件的宽高，-100rpx为自身宽高（200）的一半
width: 200rpx;
height: 200rpx;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100rpx;
margin-left: -100rpx;
水平居中C、相对父类控件（水平）居中父类：text-align:center;子类：display:inline/inline-block;3、垂直居中方式一父级display: flex;
子级align-self: center;
方式二父级position: relative;
子级
position: absolute;
top: 50%;
transform: translateY(-50%);
方式三父级position: relative;
子级
position: absolute;
top: 0;
bottom: 0;
margin: auto;
4、控件居右（第一种居右方法）子类控件居右显示父级position: relative;
子级position: absolute; /* 相对relative也可以 */
right: 0; /* 靠右调节 */
margin-right: 35rpx
（第二种居右方法）只在子类控件中加入父级position: relative;
子级
position: fixed;
right: 0;
（第三种居右方法）float: right;
（第四种居右方法）父类控件 display:flex;
justify-content:flex-end;
（第五种居右方法）子类控件一个居左一个居右显示父类控件：display:flex;红色框加上：margin-right : auto；或者红色框加上：flex:15、控件居底部方式一//父类
position: relative;
//子类
position: absolute;
bottom: 0;
//left: 50%;//底部居中
//transform: translateX(-50%);//底部居中
方式二position: fixed;
bottom: 20rpx;
方式三第一个子级min-height: 100%;
/* 等于第二个子级的高度 */
margin-bottom: -40px;
第二个子级height: 40px;
居底的还可以看看另一篇文章：底部购物车5、微信小程序横向布局、纵向布局横向布局display: flex;
flex-direction: row;
纵向布局display: flex;
flex-direction: column;
4、文字在图片中间效果图：瘦身燃脂 这四个字就是在图片的正中间代码wxml<view class='container'>
<view class="view_1">
<image class="image_1" src="../images/jiaocheng1.jpg"></image>
<text class="text_1">瘦身燃脂</text>
</view>
</view>
wxss.view_1 {
position: relative
}
.image_1 {
}
.text_1 {
width: 100px;
height: 24px;
position: absolute;
left: 0;
top: 0px;
right: 0;
bottom: 0;
margin: auto;
text-align: center;
}
5、网格布局效果图：wxss代码：
display: grid;
width: 100%;
overflow-x: hidden;
/* 设置列、行大小 fr单位是等分分配列空间 4列，如果要3列，删除一个1fr*/
grid-template-columns: 1fr 1fr 1fr 1fr;
/* grid-template-rows: 100rpx 100rpx; */
/* 有多余数据时，自动添加新行时默认行高为：200rpx */
grid-auto-rows: 100rpx;
/* 设置网格线大小 */
/* grid-gap: 10rpx; */
}