微信小程序之单选题按钮切换背景-Toy模板网

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

先来效果图

微信小程序之单选题按钮切换背景,微信小程序,小程序,vue,前端

未选效果

微信小程序之单选题按钮切换背景,微信小程序,小程序,vue,前端

已选效果

微信小程序之单选题按钮切换背景,微信小程序,小程序,vue,前端

上代码

   <view class="questionClass">
			问题1：夜晚落地西安咯，你最想先去哪里看看呢？
   </view>
	<view class="single">
			<ul class="box">
				<li v-for="(s,index) in selectList" :class="{checked:index==currentIndex}"
					@click="resultClick(index,s.id,s.qid)" :key="index">{{s.tags}}:{{s.title}}</li>
			</ul>
		</view>

export default {
  data() {
    return {
      selectList: ["A.开启属于我的狂欢时刻，先去“赛格”买买买","B.当然先去“北院门风情街”吃美食啦","C.“大唐不夜城”让我心驰神往","D.放慢旅行节奏，先去“酒店”睡个大觉养足精神"],//接口数组
      currentIndex: '10', //选项默认 不选任何一个
    };
  },
  components: {},
  methods: {
    resultClick(index,s.id,s.qid) {
      this.currentIndex= index;
      console.log(c)
    }
  }
};
</script>

css

.single {
		position: fixed;
		z-index: 19;
		margin: auto;
		width: 75%;
		height: 130px;
		border-radius: 15px;
		bottom: 22%;
		// background-color: yellow;
	}

	// 单选
	.single {
		width: 100%;

		ul.box {
			padding: 0;
			width: 90%;
			margin: auto;

			li {
				width: 95%;
				height: 25px;
				float: left;
				margin-top: 5px;
				padding-left: 5%;
				padding-top: 1%;
				color: black;
				font-size: 27upx;
				font-weight: bold;
				border-radius: 15px;
				background-color: #fff;
				// font-family: syht;
				list-style: none;

				&.checked {
					background-color: #0000FF;
					color: #fff;
					border: 1px #0000FF solid;
				}
			}
		}
	}

over。。。。。文章来源地址https://www.toymoban.com/news/detail-532719.html

到了这里，关于微信小程序之单选题按钮切换背景的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！