微信小程序|使用＜view＞和bindTap自定义格式按钮

最新推荐文章于 2024-08-24 00:59:55 发布

秋田刀鱼

最新推荐文章于 2024-08-24 00:59:55 发布

阅读量685

点赞数

文章标签：小程序前端 ui设计 css

本文链接：https://blog.csdn.net/qq_51314244/article/details/118959037

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用微信小程序的WXSS和WXML来创建具有特定样式的按钮，并实现点击按钮后跳转到新的页面。示例代码展示了按钮的布局、边框、阴影等细节，并通过navigator组件完成页面间的redirect跳转。

摘要由CSDN通过智能技术生成

按钮样式效果图：

点击跳转到新页面：

WXSS:

/* 按钮样式;
跳转到设置页面pages/redirect */
.btn-area{
  margin: auto;
  margin-top: 40rpx;
  display:flex;
  justify-content:center;
  align-items: center;
  border:2px solid #ffffff;
  border-radius: 8px;
  height:70rpx;
  width:300rpx;
  box-shadow:8px 8px 20px 1px #d1d4d4;
}

WXML:

<view class="btn-area" >
	 <navigator
		   url="./redirectpage?title=redirect"
           hover-class="other-navigator-hover"
           open-type="redirect" 				 
		>按钮样式</navigator>  
</view>