项目希望实现如上效果, 使用vant的picker组件 而源码是这样的:
<view
class="van-picker__cancel"
hover-class="van-picker__cancel--hover"
hover-stay-time="70"
data-type="cancel"
bindtap="emit"
>
{{ cancelButtonText }}
</view>
<view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{
title
}}</view>
<view
class="van-picker__confirm"
hover-class="van-picker__confirm--hover"
hover-stay-time="70"
data-type="confirm"
bindtap="emit"
>
{{ confirmButtonText }}
</view>
只能支持文字,不能设置图标图片背景图等 设置确定和取消文字为空
<van-picker columns="{{ cityList }}" show-toolbar bind:change="onChange" default-index="{{ 0 }}" title="选择城市"
confirm-button-text="" cancel-button-text="" bind:confirm="onClose" />
然后给确定按钮设置背景图:
.van-picker__confirm {
background-position: center;
background-size: 16px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA+dJREFUaEPNmr1v00AYxt/3zmThH4AWkGCNYudDNAiYYGCoCqoQHxMDE+U/oBIjAnZUhAQDE7RU4UtiggUmKATHScQELS3qyMTk2veiq5zKde3EH5c4XpM4z3P3u3sfv2cslUrHOOf3GGPnhBAfhRC3LMvqAgDBeF1YLBb1QqFwFxFPEdE713XnsVwuNxhjs1IrEUnR34jopmmaK+OkX9f1uqZpD4mojIjo6W1gpVL5h4j7e2I9E2u2bc92u93WOJgwDKPCGHsLABM98VKXEOKvNPABEc8EhRLRqhDiaqvVkjORF06sUqnUAWAZESeCGoUQy1gqlWqapj0GAMPvzpuJJhHN5YWTxIZz/ggRDb94T1vLcZxrkiVWrVaniGgREY+EfHHNcZwL7Xa7PUqcisWiUSgU3gDAYf/Aeuyvu6572bKsL9uLQV4eZ68ifrBKRFdM0/w6ApxQ1/UpzvlSxIBu2LZ9vrc+dwxIE7qun9A0bcG/0ke9O4XtNj0NiGg6jjNnWdbn3sDvMpA3TnGx8VMQNJAXTomw8a/FUAOjxikpNrEMjAqnNNjENTBsnFJjk8jAsHDKgk1iA6pxyopNGgOqcFKCTWoDWXFShU0mA2lxUolNVgNJcZIRJXa2SRoYIwtZnBvFyU5CCBZ8kuqXbeL8r5IZ8G6yHcUBYEmmWP+Nvcy+DgBykPpG4iwJN9MM9ASXy+XjiNgAgMlgdg+OqGdsVyROOuoqZ2DnXoZhnGaMPZCpPMqEFB8WicfCgNydDMM4yRh7joiTYaKIaOdJKgs2Q5kBybq327xAxF3rofeHRPSbiC6pfLJTsga8ArenbxPBv9K+kxID/YpUhAlljYKsBgZlmz9ybQQbUl4dUNIoyGQgTrZBxH1hu5OqNmZqAwmyDXq70zNEPBRS7DLhlMbAIGxCi1S/YifbmGn7TokNxMHG37fxj3hUscuCUyIDCbCJagb3il0kTltbW9OdTudH3Ooc10AqbKJEDMhOPx3HkX3P73GqdSwDWbCJMjEApxXXdWULsTloJgYaUIBNlIa+OCHiL9u2Zwbh1M+AUmyGhVO/1mJothlGJM6CU6iBIWKjHKeggZFgoxKn4AHHyLBRtTvtGMgBGyU4SQO5YpMVJym+yjl/Ejxm9TK76brujahsM6jIZP1c7k6c8wUAKIWk2BUhxHV50P0eEc+GPDltIuLFZrMpD9RyO+jWdf2UpmmLAHAwaIKIXke9arAphJhptVoyj+R+1Wq1OhG9JKIDgZbNxp6XPVT3bVS5Dyt2RPRUroGjnPM7iDgNAJ9s257vdDryVD4vbPrtTgZj7D4i1oUQDSHE7f/mf3IOO97byQAAAABJRU5ErkJggg==);
}
小程序设置背景图只能网络图片、base64、标签image base64转换:https://www.sojson.com/image2base64.html
|