和风天气——背景图片的更换功能

最新推荐文章于 2025-06-06 19:00:28 发布

原创最新推荐文章于 2025-06-06 19:00:28 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

该博客介绍了小程序背景图片更换功能。为满足用户喜好、避免审美疲劳，增加可修改壁纸功能，点击主页头像旁按钮可挑选更换。此功能在index中实现，在index.js设置背景图片，更换后导航栏颜色也会改变，index.wxml在主页顶部滑动显示可更换图片。

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

背景图片的更换功能介绍

小程序中，为了是界面更符合用户的喜好，我们增加了可修改壁纸功能。点击主页头像旁边的按钮，可以在可选择的几种壁纸中挑选并更换现有的壁纸。这使得小程序能满足更多人的审美，同时避免用户产生审美疲劳。

与悬浮球一样，背景图片的设置功能也是在index中来实现。

具体实现

index.js中设置背景图片

//设置背景图片
  setBcgImg (index) {
    if (index !== undefined) {
      this.setData({
        bcgImgIndex: index,
        bcgImg: this.data.bcgImgList[index].src,
        bcgColor: this.data.bcgImgList[index].topColor,
      })
      this.setNavigationBarColor()
      return
    }
    wx.getStorage({
      key: 'bcgImgIndex',
      success: (res) => {
        let bcgImgIndex = res.data || 0
        this.setData({
          bcgImgIndex,
          bcgImg: this.data.bcgImgList[bcgImgIndex].src,
          bcgColor: this.data.bcgImgList[bcgImgIndex].topColor,
        })
        this.setNavigationBarColor()
      },
      fail: () => {
        this.setData({
          bcgImgIndex: 0,
          bcgImg: this.data.bcgImgList[0].src,
          bcgColor: this.data.bcgImgList[0].topColor,
        })
        this.setNavigationBarColor()
      },
    })
  },

若默认导航栏颜色为黑色或白色，则在更换某些图片时，会使得整体效果不佳。故在更换背景图片后，导航栏的颜色也要改变。

通过访问每张照片对应的导航栏颜色来更改颜色。

//更换背景图片后，导航栏的颜色也会跟着变
  setNavigationBarColor (color) {
    let bcgColor = color || this.data.bcgColor
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.data.bcgColor,
    })
  },
  //重新加载天气
  reloadWeather () {
    if (this.data.located) {
      this.init({})
    } else {
      this.search(this.data.searchCity)
      this.setData({
        searchCity: '',
      })
    }
  },

index.wxml在主页顶部滑动显示可以更换的背景图片

 <view class='chooseBcg' wx:if='{{bcgImgAreaShow}}'>
    <view class='top'>
      <view class='title'>更换背景</view>
      <view class='bcgs'>
        <view class='border {{bcgImgIndex === index ? "active" : ""}}' wx:for='{{bcgImgList}}' wx:key='{{index}}'>
          <image src='{{item.src}}' catchtap='chooseBcg' data-index='{{index}}' data-src='{{item.src}}'></image>
        </view>
      </view>
    </view>
    <view class='close' catchtap='hideBcgImgArea'>
      <image src='/img/up-arrow.png'></image>
    </view>
  </view>