微信小程序重定义button样式--open-type=concat

wxml

<button class="by-but" open-type="contact">
	<view>
		<image class="icon" src="../../static/image/icon_online_service.png"></image>
  	<view class="text">在线客服</view>
  </view>
</button>

在这里插入图片描述
wxss

.by-but {
  background-color: transparent;
  border: 0px;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  line-height: 1.49;
  padding: 0;
  view {
  z-index: 100;
  }

  // margin-left: 240rpx;
}

.by-but::after {
  border: 0;
}
 .icon {
    width: 84rpx;
    height: 84rpx;
  }

  .text {
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #191E23;
    line-height: 33rpx;

  }

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序scroll-view组件可以实现触底加载效果,具体实现方法如下: 首先,在wxml文件中将scroll-view组件的bindscrolltolower属性绑定到一个函数上,例如: <scroll-view bindscrolltolower="loadMoreData"> <!-- 这里是scroll-view的具体内容 --> </scroll-view> 然后,在对应的js文件中,定义loadMoreData函数来处理触底加载的逻辑: Page({ data: { // 这里是页面需要显示的数据 }, loadMoreData: function(e) { // 判断是否已经加载了全部数据,如果是则不进行加载 if (this.data.isLoadedAll) { return; } // 进行加载操作,可以发送请求获取更多的数据 wx.request({ url: 'https://example.com/loadmore', data: { // 这里是传递给后端的参数 }, success: res => { // 将获取到的新数据追加到原有数据的后面 const newData = this.data.dataList.concat(res.data.data); this.setData({ dataList: newData }); // 判断是否已经加载了全部数据,如果是则更新isLoadedAll状态为true if (res.data.isLoadedAll) { this.setData({ isLoadedAll: true }); } } }); } }); 通过上述代码,我们定义了loadMoreData函数来处理触底加载的逻辑。在函数中,首先判断是否已经加载了全部数据,如果是则返回,不进行加载操作。然后,通过wx.request发送请求获取更多的数据,将新数据追加到原有数据的后面,并更新isLoadedAll状态来判断是否已经加载了全部数据。 这样,当用户滑动至scroll-view组件的底部时,就会触发loadMoreData函数进行加载操作,实现了触底加载的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值