支付宝小程序首页、页面布局、滚动屏幕、自定义搜索框

支付宝小程序首页、页面布局、滚动屏幕、自定义搜索 框源码

一、页面展示如下图

 二、话不多说，直接上源码

1.acss代码

.under_line{
  width: 100%;
  border-top: 1rpx solid #efefef;
}

.left {
  border-top: 1rpx solid #efefef;
  border-right: 1rpx solid #efefef;
}
 
.text-style {
  width: 200rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}


 
.active3 {
  display: block;
  width: 500rpx;
  height: 6rpx;
  background: rgb(88, 123, 193);
  position: relative;
  left: 0rpx;
  bottom: 30rpx;
}

.active2 {
  color: rgb(88, 123, 193);
}
 
.active1 {
  color: #96C158;
}
 
.active {
  display: block;
  width: 50rpx;
  height: 6rpx;
  background: #96C158;
  position: relative;
  left: 75rpx;
  bottom: 30rpx;
}

.scrollY {
  width: 210rpx;
  position: fixed;
  left: 0;
  top: 0;
  border-right: 1rpx solid #efefef;
}

.right{
  border-top: 1rpx solid #efefef;
  border-left: 1rpx solid  rgba(0,0,0,0.0);
  margin-left: 2rpx;
}

.scrollY2 {
  width: 520rpx;
  position: fixed;
  right: 0;
  top: 0;
  border-left: 1rpx solid rgba(0,0,0,0);
  margin-left: 2rpx;
}

.text-style2 {
  width: 520rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: left;
  font-size: 34rpx;
  font-family: PingFangSC-Semibold;
  color: rgba(51, 51, 51, 1);
}

.button_call{
  height: 90rpx;
  width: 90rpx;
  position: fixed;
  bottom: 150rpx;
  right: 13rpx;
  opacity: 0.7;
  z-index: 100;
}

2.axml代码

<!-- 左侧滚动栏 -->
<view class ='total'>
  <view class='under_line'></view>
  <view style='float: left' class='left'>
    <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'>
      <view class='all clear'>
        <block wx:key="lists" wx:for="{{lists}}">
          <view bindtap='jumpIndex' data-menuindex='{{index}}'>
            <view class='text-style'>
              <text class="{{indexId==index?'active1':''}}">{{item}}</text>
              <text class="{{indexId==index?'active':''}}"></text>
            </view>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
  
  <!--右侧栏-->
  <view class="right">
      <!--判断indexId值显示不同页面-->
       <view wx:if="{{indexId==0}}">
          <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
          <view class='all clear'>
          <block wx:key="lists_r0" wx:for="{{lists_r0}}">
          <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
            <view class='text-style2'>
              <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
              <text class="{{indexIdr0==index?'active3':''}}"></text>
            </view>
          </view>
          </block>
          </view>
          </scroll-view>
        </view>
  
        <view wx:if="{{indexId==1}}">
        <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'>
          <view class='all clear'>
          <block wx:key="lists_r1" wx:for="{{lists_r1}}">
          <view bindtap='jumpIndexR0' data-menuindex='{{index}}'>
            <view class='text-style2'>
              <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text>
              <text class="{{indexIdr0==index?'active3':''}}"></text>
            </view>
          </view>
          </block>
          </view>
          </scroll-view>
        </view>
        
       </view>
  </view>
  
  

3.js代码

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    lists: [
      "编辑", "出版", "主类3", "学生工作部", "党委部门", "校工与教务", "离退休工作处", "保卫处", "财务与审计", "实验室与设备", "人事处", "保卫处", "学院", "直属单位", "其他"
    ],
    lists_r0: [
      "主类1的子类1", 
      "主类1的子类2", "主类1的子类3", "主类1的子类4", "党委部门", "校工与教务", "离退休工作处", "保卫处", "财务与审计", "实验室与设备", "人事处", "保卫处", "学院", "直属单位", "其他"
    ],
    lists_r1: [
      "主类2的子类1", 
      "主类2的子类2", "主类2的子类3", "主类2的子类4", "党委部门", "校工与教务", "离退休工作处", "保卫处", "财务与审计", "实验室与设备", "人事处", "保卫处", "学院", "直属单位", "其他"
    ],
    indexId: 0,
    indexIdr0: 0,
    indexIdr0: 1,
  },
  // 左侧点击事件
  jumpIndex(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexId: index
    });
  },

  jumpIndexR0(e) {
    let index = e.currentTarget.dataset.menuindex
    let that = this
    that.setData({
      indexIdr0: index
    });
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winHeight: res.windowHeight
        });
      }
    });
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

4.json代码

{
  "navigationBarTitleText": "首页"
    
}
  
  

三、意见与建议

有任何问题还请在评论区留言，觉得代码不错还请点赞加关注。