微信小程序
.container {
border-top: 1rpx solid #cdcdcd;
padding: 20rpx;
}
.box {
padding: 30rpx;
}
.one {
position: relative;
padding-bottom: 40rpx;
}
.onedot {
left: 5rpx;
width: 25rpx;
height: 25rpx;
position: absolute;
background-color: #36678f;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.oneline {
position: absolute;
left: 15rpx;
height: 100%;
border-left: 2px solid #e4e7ed;
}
.onemain {
position: relative;
padding-left: 45rpx;
top: -5rpx;
}
.onemaintitle {
margin-bottom: 8rpx;
padding-top: 6rpx;
color: #525252;
line-height: 0.95;
font-size: 27rpx;
}
.onemaintime {
margin-bottom: 10rpx;
padding-top: -4rpx;
color: #909399;
line-height: 0.75;
font-size: 20rpx;
}
.oneunderline {
position: absolute;
height: 10%;
border-bottom: 2px solid #909399;
}
.onemaincon {
margin-left: 3rpx;
font-size: 32rpx;
color: #112714;
}
.button {
padding: auto;
bottom: 50rpx;
right: 50rpx;
border-radius:50%;
position:fixed;
background:#ff6700;
font-size: 25rpx;
color:#fff;
width: 50rpx !important;
}
<navigator url="../addtrash/addtrash">
<button class="addnew">
+
</button>
</navigator>
<view class="box">
<view wx:for="{{list}}" wx:key="index" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintitle"> {{item.title}}</view>
<view class="onemaintime">{{item.time}}</view>
<view class="onemaincon">{{item.sentence}}</view>
</view>
</view>
</view>
当按钮悬浮的时候不能够点击并跳转至新页面
但当按钮样式不被规定 默认置于最顶的时候 能够点击后跳转至新页面
按钮悬浮于界面右下角 同时点击后能够跳转至新页面
解决思路:跳转直接用事件来绑定,另外自己看看事件能否触发,如果不能触发,给按钮加个:z-index:99
```c++
<view class="tl-btn">
<button class="addnew" @tap='goPage()'>
+
</button>
</view>
<view class="box">
<view wx:for="{{list}}" wx:key="index" class="one">
<view class="onedot"></view>
<view wx:if="{{index!=list.length-1}}" class="oneline"></view>
<view class="onemain">
<view class="onemaintitle"> {{item.title}}</view>
<view class="onemaintime">{{item.time}}</view>
<view class="onemaincon">{{item.sentence}}</view>
</view>
</view>
function goPage(){
uni.navigateTo({
url: '../addtrash/addtrash'
})
}
```
navigator url="../addtrash/addtrash" class="addnew"
button的class提上去
button换掉
可能的原因, button 和navigator 的事件冲突了
解决方案可以尝试把button 改为view
或者
整个按钮用view模拟 事件用click 在js中调用方法跳转
如能帮到你,请采纳!
不能点击 ? 是点击 事件不生效还是 ,生效了,跳转没跳转 。
前者的话,需要 看看 事件绑定 是否正确,后者 需要看看 跳转事件是否正确