button
属性:
image.png
wxml:
<button bindtouchstart="onchilk" class="userbutton"> </button>
wxss:
.userbutton
{
background-color: transparent;//背景颜色
top: 50rpx;//距离上方
margin-left: 10%;//距离左侧
width: 180rpx;//宽
height: 180rpx;//高
float: left;
position: absolute;
}
js:(事件绑定,显示一个弹窗)
onchilk: function () {
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
小结: 因本人没有html开发经验,在button中,按照以上代码设置,button 是带有一个默认的边框,类似下图:
image.png
自己设置很多属性,无果,打开调试面板调试后发现
image.png
border属性影响的,后来问了一些有html经验的朋友设置如下代码即可 取消小程序button边框
.userbutton::after
{
border: 0px dashed rgba(0,0,0,0);
}
属性:
image.png
wxml:
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="150"/>
</navigator>
js:
{
link:'/pages/test/test',
url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
}