内容：图文混编
图片跟随 选择器选择而改变
<
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;
}