uniapp h5 配送信息切换，点击文字切换背景图片

大佬请绕行，这个很简单，针对没有逻辑的小白

如上图，所达到的效果就是点击对应文字切换背景

切换结果如下图

 两张图片

 这里采用的是vue的v-if去判断，如果当前点击了配送就切换(自提切换按钮.png)图片，点击自提与之相反

用到了在图片中将文本定位的方法

下面是详细代码

1、结构

<!-- 右边自提配送 -->
			<view class="order-delivery-way" >
					<view class="ziti" v-show="showimg">
						<image src="/static//my/自提切换按钮.png" mode="" v-if="showimg == 1"></image>
						<image src="/static/my/配送切换按钮_.png" mode="" v-else></image>
						<view :class="{'active':isActive == 2}" @click="chenked(1)" style="position: absolute; bottom: 7rpx; left: 7rpx; z-index: 2;">自提</view>
						<view :class="{'active':isActive == 1}" @click="chenked(2)" style="position: absolute; bottom: 7rpx; left: 78rpx; z-index: 2;">配送</view>
					</view>
			</view>

:class="{'active':isActive == 2}" 不用管，加不加无所谓，这是之前的条件留下的，想想还是不删，能跑就怕删代码！

2、样式

.order-delivery-way {
				display: flex;
				justify-content: center;
				align-items: center;
				padding-right: 35rpx;
				.ziti {
					position: relative;
					width: 145rpx;
					height: 45rpx;
					view {
						font-size: 26rpx;
					}
				}
		}

这里样式按照个人需求调就行，要记得给到父盒子一个相对定位

3、js

data() {
			return {
				showimg: 1, //背景图片状态
			}
		},
methods: {
// 点击实现切换
			chenked(type) {
				this.isActive = type
				// console.log(type, '按钮被触发了');
				// type为1 表示点击了配送按钮，那么进行地址数据的请求方法
				if (type == 2) {
					this.showimg = 1
					this.changeDelivery() // 执行对于逻辑，比如我点击配送要获取地址什么的
				} else if (type == 1) {
					this.showimg = 2
				}
			},
}

参考文章：http://t.csdn.cn/4JLVx

完！！！