• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序DEMO——面包旅行的代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

API

  集合在一起写了一个页面,并导出,

const apiURL = 'http://xxx.xxxx.com';

const trip = {
    hot(data,callback){
        wx.request({
            url: `${apiURL}/v2/index/`,
            method: 'GET',
            data,
            header:{
                Accept: 'application/json',
                'Content-Type': 'application/json'
            },
            success(res) {
                callback('success', res);
            },
            fail(res) {
                callback('fail', res);
            },
            complete(res) {
                callback('complete', res);
            }
        })
    }
}

module.exports = {
    trip
}

  请求的时候,采用 obj.xxx(data,(state,res)=>{}) 返回函数的形式挂载数据请求;

const api = require('../../utils/api.js');

Page({
    data: {

    },
    onLoad: function(options) {
        let self = this;
        let data = {
            next_start: self.data.start
        } 
        api.trip.hot(data,(state,res)=>{
            if (state === 'success'){
                // console.log(res.data);
                let newList = res.data.data.elements;
                newList.map((trip) => {
                    let item = trip;
                    item.data[0].date_added = formatTime(new Date(item.data[0].date_added * 1000),1)
                    return item;
                });
                if (needrefresh){
                    newList = self.data.trips.concat(newList);
                };
                self.setData({
                    trips: newList,
                    start: res.data.data.next_start,
                    loading: 'none'
                });
                // console.log(newList)
            }
        })
    }
})

 

主页

  主要写了上拉加载,下拉刷新数据,页面的跳转,多行文字的省略号。

  下拉刷新,首页请求的数据中有一个 next_start 的字段。首次进入页面时,传入0,服务器返回数据和这个字段,记录这个字段,然后上拉刷新的时候,再把这个字段传给服务器,服务器会返回新的数据和新的字段。

  上拉加载,还是这个 next_start 字段。首次获得数据之后,记录此字段,上拉加载时,传入此字段,返回新的数据和新的字段,新的数据需要和之前的数据合并,然后渲染。

  页面的跳转,前往游记页面需要当前点击对象的 id 和 name 值,这个使用事件对象的 e.currentTarget.dataset 来获得,dataset 是由组件上以 data- 开头的属性集合。然后通过 wx.navigateTo() 跳转,路径中可以带参数(传值)。

  多行文字的省略号,有些文字是需要省略写法的,单行又和多行不同。

<view data-id="{{item.data[0].id}}" data-name="{{item.data[0].name}}" bindtap='viewTrip'></view>

viewTrip:function(e){
    let dataTrip = e.currentTarget.dataset;
    wx.navigateTo({
        url: `../trip/trip?id=${dataTrip.id}&name=${dataTrip.name}`,
    })
}  

.title{
    font-size: 36rpx;
    font-weight: bold;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

 

游记页面

  主要根据跳转过来的 id 和 name 来请求服务器数据,加载中画面,页面跳转。

  请求数据,可以在生命周期 onload(options) 参数中获取打开当前页面路径中的参数,然后根据它请求服务器数据。

  加载中画面,使用 wx.showToast() 和 wx.hideToast() 。

  在加载数据的时候,页面可能会显示没有数据的代码,需要做判断处理,<view class='wrap' wx:if="{{ trip != null }}">,在数据没到之前,页面不渲染。

  页面跳转和主页一样,使用  e.currentTarget.dataset ,wx.navigateTo() 和 onload(options) 。

    onLoad: function(options) {
        let self = this;
        let id = options.id;
        self.setData({
            options
        });
        wx.showToast({
            title: '正在加载',
            icon: 'loading',
            duration: 10000,
            mask: true
        });
        api.trip.waypoint(id,(state,res) => {
            if(state === 'success'){
                let trip = res.data;
                // console.log(trip);
                self.setData({
                    trip
                });
                wx.hideToast();
            }
        })
    },

 

路径页面

用户页面

发现页面

  使用 swiper 组件,flex 布局

  flex 布局,每行显示两个 item ,多的换行,这需要给 item 定宽。

.area{
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap:wrap;
    padding: 0 20rpx; 
}
.item{
    width: 345rpx;
    height: 345rpx;
    margin-bottom: 20rpx;
}

 

目的地页面

  各景区的得分(星星数量),这是一种很多地方都用的方法,最高5星,可以有半颗星。

  1. 先列个数组,值为12345,
  2. 首先依次判断当前 item 是否小于等于得分,然后渲染全颗黄星
  3. 然后依次判断当前 item 大于得分和 item-1 小于得分,然后渲染半颗黄星
  4. 最后依次判断当前 item 大于得分和 item-1 不小于得分,然后渲染灰色星。

  这里还使用了模板的方式。需要引入和并且填写 name 值,传入数据需要用到 data 属性。

<template name='m-stars'>
    <view class='m-stars'>
        <block wx:for='{{[1,2,3,4,5]}}'  wx:key='*this'>
            <image class='stars' wx:if='{{item <= count}}' src='../../image/destination/star_s.png'></image>
            <image class='stars' wx:if='{{item > count && item-1 < count}}' src='../../image/destination/semistar_s.png'></image>
            <image class='stars' wx:if='{{item > count && !(item-1 < count)}}' src='../../image/destination/unstar_s.png'></image>
        </block>
    </view>
</template>


<import src='../../component/stars/stars.wxml'/>
<template is='m-stars' data='{{count:attract.rating}}'></template>

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序开发css设置显示两行,超出部分显示......发布时间:2022-07-18
下一篇:
监控文件夹里面文件修改的小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap