微信小程序图文混编

内容：图文混编

图片跟随 选择器选择而改变

< view class= "userdata">

< view class= "userdata-name">单排扣 view >

< view class= "userdata-symbol"> view >

< picker bindchange= "coatFatThinChange" value= "{{coatFatThinValue}}" range= "{{coatFatThinArray}}" class= "userdata-input">

< text >{{coatFatThinArray[coatFatThinValue]}} text >

picker >

< image class= 'img-picker' src= '../../../assets/images/neck{{coatFatThinValue}}.png'> image >

view >

Page({

data: {

coatFatThinArray: [ '单扣大开领', '单扣一字领', '单扣小方领', '单扣圆领', '立领', '迷你小方领'],

coatFatThinValue: 0,

},

//单排扣 选择器

coatFatThinChange: function (e) {

console.log( 'picker发送选择改变，携带值为', e.detail.value)

this.setData({

coatFatThinValue: e.detail.value,})

},

})

.userdata {

margin: 10 rpx 0 rpx 0 rpx 0 rpx;

border: 1 rpx solid #6c6c6c;

width: 90%;

display: flex;

flex-direction: row;

border-radius: 10 rpx;

align-items: center;

}

.userdata-name {

width: 110 rpx;

/* border: 1rpx solid #6c6c6c; */

padding: 20 rpx 0 rpx 20 rpx 20 rpx;

}

/*第一个箭头*/

.userdata-symbol:after {

content: "";

display: inline-block;

width: 40 rpx;

height: 40 rpx;

margin: 15 rpx 0 rpx 10 rpx 0 rpx;

border-left: 1 rpx solid #6c6c6c;

}

/*后面三个箭头*/

.userdata-input {

width: 380 rpx;

/* border: 1rpx solid #6c6c6c; */

}

.img-picker{

width: 80 rpx;

height: 80 rpx;

}