微信小程序开发酒店公寓推荐文字详细列表页面制作与设计教程

今天给大家带来酒店公寓推荐文字详细列表页面制作与设计教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--home.wxml-->

<!--职位推荐-->
<view class="tuijian">
    <view></view>
    <text>职位推荐</text>
    <view></view>
</view>
<view class="remenList">
    <block wx:for="{{remenList}}">
        <view bindtap="goZhihiWeiList" class="list" data-c_userid="{{item.c_userid}}" data-job_id="{{item.job_id}}">
            <!--<image class="hotImg" src="../../image/hot.png"></image>-->
            <view class="left">
                <view class="positionName">{{item.company_name}}</view>
                <view class="conpany">{{item.job_name}}</view>
                <view class="time">{{item.update_time}}</view>
            </view>
            <view class="right">
                <view class="money">{{item.salary}}</view>
                <view>{{item.work_place}}</view>
            </view>
        </view>
    </block>
  </view>

二、wxss样式文件代码如下：

@import "../../utils/font-icon.wxss";
.slide-image{
  height: 100%;
  background-size:cover;
  background-repeat: no-repeat;
}
.nav{
  width: 100%;
  background-color: #e58026;
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  height: 60rpx;
}
swiper{
  height: 260rpx;
  margin-top: 73rpx;
}
.inputbox{
  display: flex;
  background-color: #df6f00;
  border-radius:8rpx; 
  padding: 8rpx;
  width: 72%;
}
.inputbox input{
  width: 100%;
}
.inputbox icon{
  margin-top: 6rpx;
}
.nav .action{
  color: #fff;
  width: 160rpx;
  height: 48rpx;
  line-height: 48rpx;
  display: flex;
  align-items: center;
  padding-left: 10rpx;
}
.nav .action .diqu{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.nav .action image{
  width: 40rpx;
  height: 40rpx;
  margin-top: 6rpx;
}
.placeholder{
  color: #fff;
  font-size: 12pt;
}
.remen-list ul{
  display: flex;
  flex-flow:wrap;
  align-items: center;
}
.remen-list ul li{
  text-align: center;
  width: 25%;
  box-sizing: border-box;
  margin-top: 16rpx;
  margin-bottom: 16rpx;
}

.remen-list ul li .img image{
  width: 35pt;
  height: 35pt;
}
.remen-list ul li text{
  font-size: 13pt;
}

/*职位推荐*/
.tuijian{
  text-align: center;
  background-color: #efefef;
  padding: 16rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12pt;
  color: #b2b2b2;
}
.tuijian view{
  border-bottom: 1px dashed #ccc;
  width: 35%;
}

.remenList .list{
  border-bottom: 1px solid #e5e5e5;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.remenList .list .hotImg{
position: absolute;
right: 0;
top: 0;
width: 55rpx;
height: 55rpx;
}
.remenList .list .left{
  width: 70%;
}
.remenList .list .left .positionName{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remenList .list .left .conpany{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12pt;
  color: #aaa;
  padding-top: 10rpx;
}
.remenList .list .left .time{
  font-size: 12pt;
  color: #aaa;
  padding-top: 10rpx;
}


.remenList .list .right{
  margin-top: 30rpx;
  text-align: right;
}
.remenList .list .right view{
  padding-top: 10rpx;
  font-size: 12pt;
  color: #aaa;
}
.remenList .list .right .money{
  color: #fc9a39;
}

三、js页面代码如下：

//home.js
let app = getApp();
let myrequire = require('../../utils/wxrequire');
let selectAction = require('../../utils/util').selectAction;
const all = require('../../utils/AELACTION.js').all;
const url = require('../../utils/requireurl.js').url;
Page({
  data:{
    action:"定位中...",
    imgUrls:[],
    remenList:[],
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    let _that = this;
    wx.setStorageSync( "home_page",1,);
    wx.showNavigationBarLoading() //顶部显示加载动画
    wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 2000000
    })
    app.getUserInfo(function(userInfo){//调用应用实例的方法获取全局数据
      //更新数据
      wx.setStorageSync( "userInfo",userInfo);
      let latitude = app.globalData.latitude;  //经度
      let longitude = app.globalData.longitude;  //纬度
      let rawData = app.globalData.rawData;
      let signature  = app.globalData.signature;
      let code = app.globalData.code;
      let encryptedData = app.globalData.encryptedData;
      let iv = app.globalData.iv;
      let upData={
        'latitude':latitude,
        'longitude':longitude,
        'signature':signature,
        'code':code,
        'rawData':rawData,
        'encryptedData':encryptedData,
        'iv':iv
      };
        wx.request({ //==============================用户免登陆
        url: 'https://mobile-interface.veryeast.cn/weChat/wechat-applet/login',
        data: upData,
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success: function(res){
          let status = res.data.status;
          if( status == 1 ){
              // console.log( res )
              let data = res.data.data;
              let userCityId =selectAction( all, data.city); //===用户当前定位的城市
              // console.log( userCityId )
           
              _that.setData({
                action:userCityId.current_location
              })
              wx.setStorage({ key:"user_id", data: data.user_id });
              wx.setStorage({ key:"user_ticket", data: data.user_ticket });
              wx.setStorage({ key:"user_name", data: data.user_name });
              wx.setStorage({ key:"is_binding", data: data.is_binding });
              wx.setStorage({ key:"userCityId", data: userCityId });
          }else{
            console.log( res )
           
          }
        },
        fail: function(res) {
          console.log( res )
        }
      })
    })
     wx.request({ //=======================banner图
      url: url+'/util/ads',
      method: 'POST',
      success: function(res) {
        let status = res.data.status;
        let data = res.data.data;
        if( status == 1 ){
            _that.setData({
              imgUrls : data
            })
        }else{
            console.log(res,)
        }
      },
      fail: function(res){
        console.log(res,"请求失败")
      }
    })
    wx.request({//================================职位推荐
      url: url+'/user/recommended_jobs',
      method: 'POST',
      success: function(res) {
        let status = res.data.status;
        let remenList = res.data.data.list.data;
        let allPage = res.data.data.list.pager.allPages;
         remenList.map(function(item){
           return Object.assign(item, { update_time: item.update_time.substring(0,10) })
        })
        if( status == 1 ){
            _that.setData({
              remenList : remenList
            })
            //缓存当前页数总页数list;
            wx.setStorageSync( "home_page",1,);
            wx.setStorageSync( "all_pages",allPage);
            wx.setStorageSync( "remenList",remenList);

            wx.hideToast()
            wx.hideNavigationBarLoading()
        }else{
          console.log(res)
        }
      },
      fail: function(res){
        console.log(res,"请求失败")
      }
    })

  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  go_to_search:function(){
    wx.navigateTo({
      url: '../search/search'
    })
  },
   onShareAppMessage: function () { //用户的分享
    return {
      title: '最佳东方',
      desc: '最佳东方小程序1.0版本上线啦,呼朋唤友来求职.',
      path: '/pages/home/home?userShare=true'
    }
  },
  onPullDownRefresh:function(){  //上拉刷新 在home.josn中开启;
    
  },
  onReachBottom:function(){//下拉 继续加载
    wx.showNavigationBarLoading();
    let _that = this;
    let bol = true;
    try {
      let page = parseInt( wx.getStorageSync('home_page') )+1;
      let all_page = wx.getStorageSync('all_pages');
      page <= all_page ? bol =  true:bol = false;
      if (page && all_page && bol ) { //成功获取页码,并且小于总页码;
          wx.request({//职位推荐
            url: url+'/user/recommended_jobs',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            data:{
              "page":page
            },
            method: 'POST',
            success: function(res) {
              let status = res.data.status;
              let newList = res.data.data.list.data;
              let allPage = res.data.data.list.pager.allPages;
              newList.map(function(item){
                return Object.assign(item, { update_time: item.update_time.substring(0,10) })
              })
              if( status == 1 ){
                  let remenList = wx.getStorageSync('remenList');
                  let zhiweiList = remenList.concat(newList);
                  _that.setData({
                    remenList : zhiweiList
                  })
                  //缓存当前页数总页数list;
                  wx.hideNavigationBarLoading();
                  wx.setStorageSync("home_page", page);
                  wx.setStorageSync("all_pages", allPage);
                  wx.setStorageSync("remenList", zhiweiList);
              }else{
                 console.log("接口挂了")
              }
            },
            fail: function(){
              console.log("请求失败")
            }
          })
      }else{ //已加载完所有page;
        wx.showModal({
          title: '提示',
          content: '正在努力加载...'
        })
      }
    } catch (e) {
      console.log( "获取page || all_page出错" )
    }
  },
  goZhihiWeiList:function(e){  //公司详情页
      let c_userid = e.currentTarget.dataset.c_userid;
      let job_id = e.currentTarget.dataset.job_id;
      if( c_userid != 0 && job_id != 0 ){
        wx.navigateTo({
          url: '../position/position?job_id='+job_id+'&c_userid='+c_userid,
          fail:function(){
            console.log("go公司详情页失败")
          }
        })
      }
  }
})

模板简介：该模板名称为【微信小程序开发酒店公寓推荐文字详细列表页面制作与设计教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。