1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序——设置背景图片

微信小程序——设置背景图片

时间:2020-01-25 21:18:16

相关推荐

微信小程序——设置背景图片

项目希望实现如上效果,

使用vant的picker组件

而源码是这样的:

<viewclass="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><viewclass="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转换:/image2base64.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。