2 首先需要将容器元素设置为 display:flex然后设置图片元素的宽度为固定值或百分比,并设裤饥置 margin-right:20px使其与下一个图片之间留有一定的空隙。
3 可以根胡搜返据具体需求修改容器元素和图片元素的CSS样式,以达到想要的效漏滚果。
1、背景图片设置可以用服务器上的图片。
2、也可以将本地图片转成base64的。
wxml:
<view class="topview-left" style="background-image: url({{background}})mode='scaleToFill'"/>
js:
data: {
background: "肢山判/style/images/icon_coupon_backgroud.png",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//设置背景图片
let base64 = wx.getFileSystemManager().readFileSync(this.data.background, 'base64')
this.setData({
'background': 'data:image/pngbase64,' + base64
})
//设置导航栏标题
wx.setNavigationBarTitle({
title: '下发优惠券'
})
},
wxss:
.topview-left {
display: flex
flex-direction: column
align-items: center
justify-content: center
width: 30%
height: 113px
background-repeat: no-repeat/** 不重复*/
background-size: 100% 100%
background-image: url('data:image/pngbase64,base64码')/** 添加背景图片的*/
}
3、也可以直接设置定位实现。
<view style="display: flexalign-items: centertext-align:centerjustify-content: centermargin-bottom:10px">
<image src="/pagesChronic/images/icon_case_background.png" style="height:26pxwidth:167pxposition:absolute"></image>
历改 <text style="position: relativecolor:#FF9721">评价</text>唯轮
</view>
效果:
<button bindtap="powerDrawer" type="primary" size="mini" style="width: 55%" data-statu="open">中奖记录</button>
<!-- 中间名单d窗 -->
<view class="drawer_div">
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationPrize}}" class="drawer_box" wx:if="{{showModalStatus}}">
<view class="drawer_title">
中奖记录
<image src="../img/[email protected]" bindtap="powerDrawer" data-statu="close"></image>
</view>
<view class="drawer_content">
<view class="top grid">
<text>
名称:啦啦啦啦啦啦啦啦
</text>
<text>
时间:2020-02-20
</text>
</view>
<view class="top grid">
<text>
名称:啦啦啦啦啦啦啦啦
</text>
<text>
时间:2020-02-20
</text>
</让岩view>
</view>
</view>
</view>
.drawer_screen {
width: 100%
height: 100%
position: fixed
top: 0
left: 0
z-index: 1000
background: #000
opacity: 0.5
overflow: hidden
}
/*content*/
.drawer_box {
width: 650rpx
overflow: hidden
position: fixed
top: 50%
left: 0
z-index: 1001
background: #FAFAFA
margin: -150px 50rpx 0 50rpx
border-radius: 3px
}
.drawer_title{
padding:30rpx 20rpx
font-size: 36rpx
text-align: center
position: relative
}
.drawer_title 郑扰image{
display: inline-block
width: 30rpx
height: 30rpx
position: absolute
right: 9px
top: 10px
}
.drawer_content {
height: 210px
overflow-y: scroll /*超出父盒子高度可滚动*/
padding: 0 20rpx
}
.top{
display: flex
justify-content: space-between
border-bottom: 1px dashed #ccc
}
.top text{
display: inline-block
height: 60rpx
line-height: 20rpx
}
data: {
animationPrize: {},
}
powerDrawer: function (e) {
// console.log(e)
let currentStatu = e.currentTarget.dataset.statu
this.util(currentStatu)
},
util: function (currentStatu) {
坦丛御 /* 动画部分 */
// 第1步:创建动画实例
var animation = wx.createAnimation({
duration: 200, //动画时长
timingFunction: "linear", //线性
delay: 0 //0则不延迟
})
// 第2步:这个动画实例赋给当前的动画实例
this.animation = animation
// 第3步:执行第一组动画
animation.opacity(0).rotateX(-100).step()
// 第4步:导出动画对象赋给数据对象储存
this.setData({
animationPrize: animation.export()
})
// 第5步:设置定时器到指定时候后,执行第二组动画
setTimeout(function () {
// 执行第二组动画
animation.opacity(1).rotateX(0).step()
// 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象
this.setData({
animationPrize: animation
})
//关闭
if (currentStatu == "close") {
this.setData({
showModalStatus: false
})
}
}.bind(this), 200)
// 显示
if (currentStatu == "open") {
this.setData({
showModalStatus: true
})
}
},
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)