微信小程序--页面背景图固定不上滑

一、实现的效果图

在页面下滑的时候，显示数据，并且在移动页面到底部的时候，页面的背景图不会跟着滑动

二、实现的步骤

页面的test1.js代码

test1.js

// pages/test1/test1.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
        wx.request({
            url: "http://localhost/test/index.php",
            success: function (rep){
             console.log(rep);/*将数据在控制台数据查看*/
             that.setData({
                items: rep.data/*将数据暂存到items数组中*/
              });
            }
        })   /*获取项目库的数据*/ 
    }

})

页面的test1.wxml代码

test1.wxml
<view class="background">
<image class="backgroundimage" src="https://pic4.zhimg.com/v2-b1e47e987bdb3ae7cfe60089acb4b475_r.jpg?source=1940ef5c"></image>
<view class="program-list" wx:for="{{items}}">
    <view class="product-item">
         <view>{{item.name}},{{item.program_type}},{{item.sex}}</view>
         </view>
</view>
</view>

页面的test1.wxss代码

test1.wxss
.background{
    position: relative;
  }/*背景图容器*/
  .backgroundimage{
    position: fixed;
    background-size: cover;/*设置了背景图铺满整个容器*/
    background-repeat: no-repeat;/*设置不重复平铺*/
    background-position: center center;/*设置了背景图在容器中的位置为居中*/
    height: 100%;
    width: 100%;
    background-attachment: fixed; /* 将背景图固定不动 */
    z-index: -1;
  }/*背景图的样式*/
  .program-list{
    padding: 15rpx;
  }/*初始数据文本框的容器，用来确认内部每个item项的样式*/
  .product-item {
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color:aliceblue;
    width: 600rpx;
    border-radius: 15rpx;
    height: 210rpx;
  }/*显示被搜索的内容*/

这样就能够实现小程序页面的背景图固定在页面，显示的内容是为了更加直观的看到滚动页面背景图不会随着滑轮的移动导致页面也随之移动，微信小程序通过PHP连接到数据库获得的url地址可以看我上一篇文章，有详细的教程