先来效果图

 

未选效果

 

已选效果

 

 上代码

   <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>

js

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。。。。。