微信小程序——实现单选、多选

这篇具有很好参考价值的文章主要介绍了微信小程序——实现单选、多选。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序单选,微信小程序,微信小程序,前端,笔记

单选使用radio-group标签包裹radio标签

多选使用checkbox-group 标签包裹checkbox标签

 单选和多选的wxml代码

<view class="form-container">
<!-- 实现单选 -->
  <text>请输入你最喜欢的水果</text>
  <radio-group bindchange="">
    <radio value="" />苹果
    <radio value="" />芒果
    <radio value="" />火龙果
  </radio-group>
  <text>请选择你最喜欢的电视剧</text>
  <!-- 实现多选 -->
  <checkbox-group bindchange="">
    <view>
      <checkbox value="" />狂飙
    </view>
    <view>
      <checkbox value="" />奥特曼
    </view>
    <view>
      <checkbox value="" />巴拉拉小魔仙
    </view>
    <view>
      <checkbox value="" />今日说法
    </view>
  </checkbox-group>
</view>

以下是wxss代码文章来源地址https://www.toymoban.com/news/detail-741108.html

/* pages/form/form.wxss */
.form-container{
  width: 100%;
  padding: 20rpx;
}
radio-group{
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
}
checkbox-group view{
  width: 100%;
  height: 100rpx;
}

到了这里,关于微信小程序——实现单选、多选的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端笔记--微信小程序(原生)

    介于工作需要,这里总结一下微信小程序的开发。 官网:微信小程序 开发文档:微信开放文档 vscode安装插件:   ‘ wxml 对应 html wxss 对应 css js 逻辑层 json 数据配置层 同样也是MVVM模型 (1)app.json pages :该项目的所有页面,字符串对应文件路径,但是不要加后缀名。 我们可

    2024年02月11日
    浏览(29)
  • 微信小程序picker组件的简单使用 单选

    classData是接口请求的数组 如果picker显示的值是[object,object]这样的 range-key=\\\"className\\\" range-key就是重点 修改成你要显示的字段

    2024年02月12日
    浏览(28)
  • 微信小程序radio单选按钮选中与取消

       

    2024年02月15日
    浏览(29)
  • 前端笔记(Css、JS、Vue、UniApp、微信小程序)

    点击穿透 应用场景:点赞或送礼等出现的弹窗遮罩,无法再次触发点击事件 磨砂模糊 底部安全距离 可以放入【common.scss】中,在需要的页面引入 宽度根据内容决定 媒体查询@media 必须是以 @media 开头 使用 mediatype 指定媒体(设备)类型 使用 and | not | only 逻辑操作符构建复杂

    2024年04月26日
    浏览(31)
  • 微信小程序 列表多选 下拉分页 滑动切换分类

    1、卡片列表 2、分页(下拉页面加载分页数据) 3、分类(页面间互不干扰,数据也不干扰) 4、左右滑动可切换分类 5、列表搜索 6、单选模式(默认单选模式,即点击卡片,回写所选数据) 7、 多选 模式(实现微信聊天多选效果) 长按 列表或 点击多选 ,进入多选模式;

    2024年02月03日
    浏览(34)
  • 前端实现微信支付(H5,微信小程序)

    通常一些电商项目使用到微信支付操作,所以简单地介绍一下微信支付的具体流程。 微信支付是微信内置微信浏览器(其他浏览器不支持)或者微信小程序的支付接口,主要负责用户对商家执行支付操作的流程。 例如常见的电商在下单环节,就需要通过使用微信支付接口,

    2024年02月08日
    浏览(46)
  • 微信小程序实现点赞功能(前端)

    可以通过以下代码实现点赞效果,且只能点赞一次: wxml wxss js skuList   点赞前   点赞后   重复点赞

    2024年02月11日
    浏览(45)
  • 微信小程序 api+前端实现生成分享海报

    1.先看效果图,点击分享海报按钮,然后弹出分享海报  2.前端代码 这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址 https://github.com/kuckboy1994/mp_canvas_drawer 把 components 中的 canvasdrawer 拷贝到自己项目下,然后再app.json中引用就行了,如下 \\\"usingCompon

    2024年02月09日
    浏览(40)
  • 【微信小程序系列:三】前端实现微信支付与代扣签约

    微信支付 算是比较常见的功能了,这里主要说下整个流程中 前端负责 实现的一些方面,其实官方文档说得也很详细了,可以直接看官方文档。觉得文档比较复杂的话,可以直接看我写的~ 跳到官方文档。 微信支付: 理清流程最重要,以购买一件A商品为例子。主要说明前端

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包