IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 微信小程序——设置背景图片 -> 正文阅读

[移动开发]微信小程序——设置背景图片

在这里插入图片描述
项目希望实现如上效果,
使用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

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-03-03 16:26:11  更:2022-03-03 16:27:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 16:21:47-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码