《微信小程序开发从入门到实战》学习十三

那长长遥远的路

已于 2023-11-16 13:54:51 修改

阅读量337

点赞数 14

文章标签：微信小程序学习小程序

于 2023-11-15 23:58:28 首次发布

本文链接：https://blog.csdn.net/xy2937131682/article/details/134431863

版权

本文详细描述了如何在微信小程序中开发一个包含单选和多选投票功能的首页，涉及index.wxml文件中的布局和index.wxss中的样式设置，最终展示了预览效果。

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

第三章开发第一个小程序

3.2 开发投票小程序的首页

3.2.2 开发初始页面布局

在首页加单选和多选投票

pages/index/index.wxml:

<view class="container">
<view class="btn">
  单选投票
</view>
<view class="btn">
  多选投票</view>
</view>

在pages/index/index.wxss添加页面样式美化：

.container {
  justify-content: center; /* 在布局方向上居中 */
} 
.btn {
  margin:  20rpx;
  padding: 10rpx;
  border: 1rpx solid #26AB28;
  border-radius: 20rpx; /* 设置按钮边框四个角的圆角半径*/
  text-align: center;
  color: #26AB28;
}

预览效果如下：