微信小程序，动态改变背景图片

前言，作为开发新人，最近在学习微信小程序，期间遇到不少问题，对问题的解决的方法进行记录，以供学习之用。

关于微信小程序的背景图片问题，

1、微信小程序不能使用本地的图片设置背景图片，即

<view class="backImg" style="background-image: url('../images/1.jpg')">
</view>

这样的设置是不能显示图片的。

解决办法：只能使用网络图片或者是base64

我使用的是访问网络图片的方式解决的，即

<view class="backImg" style="background-image: url('http://localhost/Demo/images/1.jpg')">
</view>

注：微信小程序的url不能带有端口号，这里localhost换成域名

2、当背景图片需要改变的时候，怎么办？

解决办法：可以利用数据绑定实现动态改变样式，

wxml代码：

<view  style="background-image: url({{BackgroundImg}})" ><button bindtap="changeImg">点击修改背景颜色</button></view>

js代码：

changeImg: function() {var bgImg = 'http://localhost/Demo/images/2.jpg';this.setData( {pBackgroundImg: bgImg} );}

js改进（根据图片名字设置背景图片）

changeImg: function(name) {var i = name;var bgImg = 'http://localhost/Demo/images/'+ i +'.jpg';this.setData( {pBackgroundImg: bgImg} );}

这里对方法进行了封装，直接在别的函数调用就好了

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this    //这句话是必须的that.changeImg(1);},

参考文章：https://www.cnblogs.com/wanghaonull/p/6284764.html

微信小程序，动态改变背景图片相关推荐

微信小程序设置wxss背景图片
微信小程序设置wxss背景图片目前只支持两种: 在线图片如果有自己的服务器可以将图片放到自己的web服务器上: 或者参考这个通过qq相册或百度相册将本地图片变为网上图片通过qq相册或百度相册将本地图 ...
微信小程序如何设置背景图片
问题描述在微信小程序当我们使用本地图片作为背景图片的时候我们会参与以下问题. 代码: .bg{width: 750rpx;height: 540rpx;background-image: url(. ...
微信小程序开发：背景图片设置
开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错:"本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<image/>标签.&q ...
微信小程序如何设置背景图片（可行版！！）
1. 添加背景图(两步曲) (1).先在wxml里写一个块,块里包含一张图片即可,其实不加块也行,单独的一张图片就行了,自我代码习惯罢了(如下)  <view& ...
【干货】微信小程序如何设置背景图片
利用流布局,设置z-index层级,将image标签置于底层 //html <view class="container"><image src='../imag ...
微信小程序设置模糊背景图片
 <view class="bgImage"><image src="{{songs.al.picUrl}}" ...
微信小程序动态设置背景
wx.setBackgroundColor(Object object) 支持版本 >= 2.1.0 动态设置窗口的背景色 wx.setBackgroundColor({backgroundCo ...
微信小程序——button添加背景图片
<button class="weui-btn" form-type='submit' plain='true'> <image src='../../image ...
微信小程序background设置背景图片不能用本地图片
转载于:https://my.oschina.net/u/3512111/blog/1031402
微信小程序导航条配置图片背景
文章目录微信小程序导航条配置图片背景全部页面替换就首页特殊,其他页面纯色导航条(沿用微信那套) 相关代码如果你觉得写的不错或者帮到你了,记得给我点个赞哟~ 微信小程序导航条配置图片背景需要实 ...

微信小程序，动态改变背景图片

微信小程序，动态改变背景图片相关推荐

最新文章

热门文章