讲真!写后端的去写前端,像我半吊水的前端能力再去写小程序,有时真的心累。ε=(´ο`*)))唉!盘他...
wxml 文件
<view class='home-search-border'>
<view class='home-search'>
<input class='home-input' maxlength="20" auto-focus></input>
<button class='home-search-btn'>搜索</button>
</view>
</view>
<!--内容区 纵向滚动-->
<scroll-view class='home-scroll' scroll-y style='height:{{scrollHeight}}px'>
<view class='home-box'>
<image class='home-box-img' src='/static/image/super.jpg'></image>
<view class='home-box-text'>
<view>这是一个心愿,这是一个信仰!</view>
<view>你是我的芯,世界变幻,你我同在</view>
<view>2019-08-01</view>
</view>
</view>
<!--滚动的list内容 将上面<view class='home-box'>的模块复制几份-->
</scroll-view>
js 文件
/**
* 生命周期函数--监听页面加载
*/
onLoad:function(){
let that = this;
//计算 scroll-view 的高度
that.calculateScrollViewHeight();
},
//计算 scroll-view 的高度
calculateScrollViewHeight() {
let that = this
let query = wx.createSelectorQuery().in(this)
query.select('.home-search-border').boundingClientRect(function (res) {
//得到搜索外壳的高度
let searchHeight = res.height
//获取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight
//计算 scroll-view 的高度
let scrollHeight = screenHeight - searchHeight
that.setData({
scrollHeight: scrollHeight
})
}).exec()
},
微信文档:wx.createSelectorQuery() 微信文档
wxss文件
/* 搜索框 */
.home-search-border{padding:20rpx 30rpx;}
.home-search{position:relative;background-color:#F8F8F8;border-radius:12rpx;box-shadow: rgba(0,0,0,0.2) 0px 2px 10rpx 4rpx;}
.home-input{height:60rpx;padding:12rpx 20rpx;margin-right:60px;}
.home-search-btn{line-height: 84rpx;position:absolute;top:0;right:0;}
/* 纵向滚动 */
.home-scroll{width:100%;position:absolute;background-color:#f2f2f2;}
.home-box{padding:30rpx 20rpx;margin: 20rpx 30rpx;background-color:#fff;border-radius:12rpx;display:flex;position: relative;box-shadow: rgba(8,8,8,0.2) 0px 0px 10rpx 4rpx;}
.home-box-img{width:150rpx;height:150rpx;margin-right:30rpx;}
.home-box-text{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
参考文章:https://blog.csdn.net/u010872619/article/details/86156882
https://blog.csdn.net/weixin_41871290/article/details/81103253
星星之火可以燎原!