微信小程序添加背景板润色

最新推荐文章于 2024-11-19 11:53:01 发布

Blank_Tt

最新推荐文章于 2024-11-19 11:53:01 发布

阅读量849

点赞数

分类专栏：微信小程序文章标签：小程序背景板

本文链接：https://blog.youkuaiyun.com/Blank_Tt/article/details/90576119

版权

微信小程序专栏收录该内容

4 篇文章

订阅专栏

该博客围绕小程序前端背景板功能展开。介绍此功能可用于个人中心等界面，点击图标能切换背景。详细讲解代码，包括wxml展示图片和标题、样式使用，图片静态地址放于config.js。还说明了在个人中心使用背景板的方法，如添加wxml内容等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、说明

小程序前端开发经常遇见不知道怎么美工？我在这里给大家提供一个背景板功能，可放在个人中心等界面，效果如下图所示：

点击图标即可切换当前背景，也就是选择图片。

二、代码详解

1、wxml中，展示列表中的图片以及相应的标题

<!--pages/skin/skin.wxml-->
<view class="skin-list">
    <block wx:for="{{skinList}}" wx:for-item="skinItem" wx:for-index="skinIndex" wx:key="skin">
        <view class="skin-item {{nowSkin == skinItem.imgUrl ? 'skin-item-active' : ''}}" data-url="{{skinItem.imgUrl}}" bindtap="chooseSkin">
            <image src="{{skinItem.imgUrl}}" class="skin-img"></image>
            <view class="skin-title">{{skinItem.title}}</view>
        </view>
    </block>
</view>

2、使用到的样式

.skin-list {
    overflow: hidden;
}
.skin-item, .skin-img {
    width: 710rpx;
    height: 360rpx;
}

.skin-item {
    box-sizing: border-box;
    position: relative;
    margin: 20rpx auto;
    border-radius: 20rpx;
    box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, .2);
    overflow: hidden;
}

.skin-item-active {
    border: 6rpx solid #47a86c;
}

.skin-item-active::before {
    content: '';
    display: block;
    position: absolute;
    top: -80rpx;
    right: -80rpx;
    z-index: 4;
    width: 160rpx;
    height: 160rpx;
    transform: rotate(45deg);
    background-color: #47a86c;
}

.skin-item-active::after {
    content: '在用';
    display: block;
    position: absolute;
    top: 5px;
    right: 3px;
    z-index: 4;
    text-align: center;
    transform: rotate(45deg);
    color: #fff;
}

.skin-title {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80rpx;
    font-size: 32rpx;
    line-height: 80rpx;
    padding: 0 40rpx;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 0 0 20rpx 20rpx;
    color: #fff;
}

3、我把图片的静态地址放到另一个config.js内了，方便其他地方进行调用。

var config = require('../../colorui/components/config')
Page({
  data:{
    skinList: config.skinList,
    nowSkin: ''
  },
  onLoad:function(options){
    var that = this
    wx.getStorage({
      key: 'skin',
      success: function(res){
        if (res.data == "") {
          that.setData({
            nowSkin: config.skinList[0].imgUrl
          })
        } else {
          that.setData({
            nowSkin: res.data
          })
        }
      }
    })
  },
  chooseSkin: function(e) {
    var url = e.currentTarget.dataset.url
    wx.setStorage({
      key: 'skin',
      data: url,
      success: function(res){
        wx.navigateBack({
          delta: 1,
          success: function(res){
            console.log('success')
          }
        })
      }
    })
  }
})

config.js部分内容（skin调用即可）：

var staticUrl = 'https://static.sesine.com/wechat-weapp-movie'

module.exports = {
  skinList: [
    { title: '公路', imgUrl: staticUrl + '/images/user_bg_1.jpg' },
    { title: '黑夜森林', imgUrl: staticUrl + '/images/user_bg_2.jpg' },
    { title: '鱼与水', imgUrl: staticUrl + '/images/user_bg_3.jpg' },
    { title: '山之剪影', imgUrl: staticUrl + '/images/user_bg_4.jpg' },
    { title: '火山', imgUrl: staticUrl + '/images/user_bg_5.jpg' },
    { title: '科技', imgUrl: staticUrl + '/images/user_bg_6.jpg' },
    { title: '沙漠', imgUrl: staticUrl + '/images/user_bg_7.jpg' },
    { title: '叶子', imgUrl: staticUrl + '/images/user_bg_8.jpg' },
    { title: '早餐', imgUrl: staticUrl + '/images/user_bg_9.jpg' },
    { title: '英伦骑车', imgUrl: staticUrl + '/images/user_bg_10.jpg' },
    { title: '草原', imgUrl: staticUrl + '/images/user_bg_11.jpg' },
    { title: '城市', imgUrl: staticUrl + '/images/user_bg_12.jpg' }
  ],
}

三、如何使用？

比如我要在个人中心使用背景板，只需要在添加一点wxml内容和修改下js中的onShow函数以及增加样式：

wxml

<view class="user-info" style="background-image: url({{skin}})">
     <view class="user-skin" bindtap="viewSkin"></view>
     <image src="{{userInfo.avatarUrl}}" class="user-avatar"></image>
</view>

   onShow: function() {
        var that = this
        wx.getStorage({
            key: 'skin',
            success: function(res) {
                if (res.data == "") {
                    that.setData({
                        skin: config.skinList[0].imgUrl
                    })
                } else {
                    that.setData({
                        skin: res.data
                    })
                }
            }
        })
    },

wxss

.user-info {
    box-sizing: border-box;
    width: 750rpx;
    height: 400rpx;
    padding: 30rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #999;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #666;
}

.user-skin {
    position: relative;
    top: 20rpx;
    left:300rpx;
    width: 60rpx;
    height: 100rpx;
    border: 4rpx solid #fff;
    border-radius: 60rpx;
    background-color: rgba(0, 0, 0, .3);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACHElEQVRoQ+2YfVXDMBTF71MADgAFMAdMAThgUwA42BwMB5sCQAE4YCgAHODgce5Idto0adJ26ygn+bMnee/+3lfTCga+ZOD6kQEOncGcgZyBjhHoVEKqegHgyGj4EpHPFD2qegrgpOk5n+1GAKp6DOAKwATApWNwLSKjRIA3AIQvricASxF5TrFh9yQDqOotgBkAQoTWWERe6wSoKsFfavasAdzH7CQDmKg/eiLu0/ANYBQqJVM6jH5dEKzdmYjMY9mozYCpcUYrxaH1RQg6fyg6T8ygq5dlNRUR2vSuIEBL8a4T29Rs2raLJcXS9EJ4AXYkvq1g37nggKgAmJpn2bhTYpeC2tjihJq6B30AbNjrNh56OMPptCj6KQGoKoUT4C8vTjn2xWZtAUzpfDScOIcA5WAgxKapiwBLADeHUNTC51xE+FL9BTAvGEZ/SOuML0wLwBcVrwDnAyF4582AZeT2wBAgtuJLPWBKKSUTNLCvTMVsl8RXABIgVrzyRm6TXapwbK7qvmFSEe8FqIFYicgk4TrcCYDXaFV1J6JXfBDAA7ERb57H7vOdAYwfCxEUXwtQgLizM7dPAOOLs37R6jodCmMfJdQkhcmflNZoBqgPb/Sb2j2eM9CkXhP25gxEg5SbODdxOQJ5CkWbptmGPIWi8foPU4hfbfv6a8dfiMEfub7oNm7iaIp63pABeg54xV3OQM5AxwgMvoR+AMyi8zFvBJhOAAAAAElFTkSuQmCC);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40rpx;
}

在data里面直接初始化skin

 skin: 'https://static.sesine.com/wechat-weapp-movie/images/user_bg_1.jpg'

最终背景板呈现效果：