AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

一个微信小程序的案例

分类：Flex作者：编程之家原文地址

参考https://www.bilibili.com/video/BV1WQ4y1T7D8?p=38&spm_id_from=pageDriver
小程序目录结构

在这里插入图片描述

<!--index.wxml-->
<!-- logo，消息框 -->
<view class="header">
  <view class="container hdCon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/image/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 -->
      <image mode="heightFix" src="/image/kefu.png"></image>
    </view>
  </view>
</view>
<!--自定义组件-->
<!-- <xsj></xsj> -->
<!-- 轮播图 -->
<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" circular autoplay interval="4000">
    <swiper-item>
      <image src="/image/banner1.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner2.png"></image>
    </swiper-item>
    <swiper-item>
      <image src="/image/banner3.png"></image>
    </swiper-item>
  </swiper>
</view>
<!-- 课程横导航<scroll-view> -->
  <scroll-view class="major" scroll-x>
  <view class="majorCon">
    <navigator class="scroll-nav-items" url="/pages/ps/ps">
      <image class="pic" src="/image/kecheng1.png"></image>
      <view class="txt">平面设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng2.png"></image>
      <view class="txt">web前端</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng3.png"></image>
      <view class="txt">室内设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng4.png"></image>
      <view class="txt">UI设计</view>
    </navigator>
    <navigator class="scroll-nav-items" url="">
      <image class="pic" src="/image/kecheng5.png"></image>
      <view class="txt">影视后期</view>
    </navigator>
  </view>
</scroll-view>
<!-- 学生作品 -->
<view class="works">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">学员作品</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="wkMain">
      <navigator class="box" url="">
        <image class="pic" src="/image/xszp1.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp2.png"></image>
        <view class="ceng">
          <view class="tit">web 前端</view>
          <view class="line"></view>
          <view class="des">Web front end work</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp3.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp4.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp5.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp6.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp7.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>

      <navigator class="box" url="">
        <image class="pic" src="/image/xszp8.png"></image>
        <view class="ceng">
          <view class="tit">UI设计作品</view>
          <view class="line"></view>
          <view class="des">UI design works</view>
        </view>
      </navigator>
    </view>
  </view>
</view>
<!-- 动态 -->
<view class="dynamic">
  <view class="container">
    <view class="pubTitle">
      <view class="txt">行业动态</view>
      <navigator class="more">更多 ></navigator>
    </view>
    <view class="dyMain">
      <navigator class="dyItem" wx:for="{{dataList}}">
        <view class="pic">
          <image src="/image/xszp8.png"></image>
        </view>
        <view class="txt">
          <view class="title">{{item.title}}</view>
          <view class="info">作者：<text >{{item.author}}</text><text space="ensp"> - </text> 时间：<text>{{item.posttime}}</text></view>
        </view>
      </navigator>
    </view>
  </view>
</view>

<!-- footer -->
<view class="footer">
  <image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度-->
  <view class="text">
    谷歌搜索接收反驳
  </view>
</view>


/**index.wxss**/
/* 学生作品 */
.pubTitle{ /* 公共样式*/
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  margin-bottom: 40rpx;
}
.pubTitle .txt{
  font-size: 40rpx;
  position: relative;
  padding-left: 20rpx;
}
.pubTitle .txt::before{/* 使用伪元素在元素之前插入内容*/
  display: block;
  width: 8rpx;
  height: 34rpx;
  background: #c8020b;
  content: " ";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -15rpx;
}
.pubTitle .more{
  font-size: 34rpx;
  color: #666;
}
/* logo 客服布局*/
.header{
  width: 750rpx;
  height: 90rpx;
}
.hdCon{
  display: flex;
  justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */
  height: 100%;
  align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{
  height: 50rpx;
}
.hdCon image{
  height: 100%;
}
.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}
/* 轮播图*/
.banner{
  width: 100%;
  height: 295rpx;
}
.banner swiper{/* swiper默认高度150px，需要自己手动调整*/
  height: 100%;
  width: 100%;
}
.banner image{
  width: 100%;
  height: 295rpx;
}
/* 专业横排滚动导航*/
.majorCon{
  padding: 20rpx 0;
  display: flex;
  flex-wrap: nowrap;
  width: 1000rpx;
  /* justify-content: space-between; */
}
.major .pic{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.major .scroll-nav-items{
  text-align: center;
  width: 200rpx;
  flex: 1;
}
.major .txt{
  font-size: 26rpx;
  margin-top: 10rpx;
}
/* 学生作品 */
.works{
  background: #f0f3f8;
  padding: 90rpx 0 70rpx;
}
.wkMain{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wkMain .box{
  width: 344rpx;
  height: 214rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.pic{
  width: 100%;
  height: 100%;
}
.wkMain .ceng{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;/* 指定两个并排的带边框的框*/
  text-align: center;
}
.wkMain .ceng .tit{
  font-size: 34rpx;
}
.wkMain .ceng .line{
  width: 50rpx;
  height: 2rpx;
  background: #fff;
  margin: 10rpx 0 20rpx;
}
.wkMain .ceng .des{
  opacity: 0.6; /*透明度*/
  text-transform: uppercase;/* 全大写*/
  font-size: 24rpx;
  letter-spacing: 5rpx;
}
/* 行业动态 */
.dynamic{
  padding: 90rpx 0 70rpx;
}
.dyItem{
  display: flex;
  padding: 15rpx 0;
  border: 1px dashed #f4f4f4;
  justify-content: space-between;
}
.dyItem .pic{
  /* flex: 2;占两份 */
  width: 230rpx;
  height: 150rpx;
}
.dyItem .pic image{
  width: 100%;
  height: 100%;
}
.dyItem .txt{
  width: 440rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dyItem .title{
  font-size: 34rpx;
}
.dyItem .info{
  font-size: 22rpx;
  color: #888;
}
.dyItem .info text{
  font-size: 26rpx;
}
/* footer */
.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}


{
  "usingComponents": {
    "xsj":"/components/xsj/xsj"
  }
}

index.js

// import common from "../../utils/public"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dataList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    // 发送网络请求获取真实的行业动变  青年帮站酷 学习干货（数据接口)
    wx.request({
      url: 'https://ku.qingnian8.com/school/list.php',
      data:{
        num:5,
        page:4
      },
      success:res=>{
        res.data.forEach(item=>{/*处理获取到的时间戳 */
          // item.posttime=common.getMyDate(item.posttime,'Y-m-d')
        })
        this.setData({
          dataList:res.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

<!--pages/ps/ps.wxml-->
<!-- header -->
<view class="header">
  <view class="container hdCon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/image/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button><!-- open-type="contact"打开聊天框 -->
      <image mode="heightFix" src="/image/kefu.png"></image>
    </view>
  </view>
</view>

<view class="banner">
  <image mode="widthFix" src="/image/ps1.png"></image>
</view>

<view class="psBox" wx:for="{{6}}">
  <view class="psBoxTit">
    专业软件技能
  </view>
  <view class="psBoxCon">
    <image src="/image/ps2.png" mode="widthFix" class="pic"></image>
    <view class="text">
      <view>人像精修</view>
      <view>商业广告片调色</view>
      <view>商业海报级视觉精修</view>
      <view>卡通人物制造</view>
      <view>2.5D插画制作</view>
      <view>3D文字视觉特效制作</view>
      <view>平面广告创意</view>
      <view>合成特效制作</view>
    </view>
  </view>
</view>

<!-- footer -->
<view class="footer">
  <image class="pic" mode="widthFix" src="/image/logo.png"></image> <!-- 根据宽度适应高度-->
  <view class="text">
    高端实训品牌
  </view>
</view>


/* pages/ps/ps.wxss */
/* logo 客服布局*/
.header{
  width: 750rpx;
  height: 90rpx;
}
.hdCon{
  display: flex;
  justify-content: space-between; /* 设置弹性盒子在主轴（横）方向上的对齐方式 */
  height: 100%;
  align-items: center; /* 定义flex容器的当前行的侧轴方向上的对其方式（子，父都要有高度）*/
}
.hdCon navigator, .hdCon .kefu{
  height: 50rpx;
}
.hdCon image{
  height: 100%;
}
.kefu{
  position: relative;
  animation: dh linear 1s infinite alternate;/* 给消息框调用动画（来源于app.wxss）*/
}
.kefu .btn{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0; /* 设置元素的不透明度级别，用按钮盖住图像*/
}

/* 海报 */
.banner{
  width: 100%;
}
.banner image{
  width: 750rpx;
  display: block;
}
.psBox{
  padding: 80rpx 0;
  background: #1C356E;
}
.psBox:nth-child(2n){/*子选择器*/
  background: #fff;
}
.psBoxTit{
  width: 490rpx;
  height: 70rpx;
  background: #DE2E05;
  border-radius: 70rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  font-size: 40rpx;
  margin: 0 auto;
  position: relative;
  margin-bottom: 40rpx;
}
.psBoxTit::before{
  display: block;
  content: " ";
  width: 100%;
  height: 100%;
  border: 2px dotted #DE2E05;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border-radius: 70rpx;
  transform: scale(1.03,1.2);/*向外扩展（水平，垂直）*/ 
}
.psBoxCon .pic{
  width: 100%;
}
.psBoxCon .text{
  padding: 40rpx 26rpx;
 box-sizing: border-box;
 display: flex;
 flex-wrap: wrap;/*换行*/
}
.psBoxCon .text view{
  width: 50%;
  font-size: 30rpx;
  line-height: 1.8em;
  position: relative;
  padding-left: 18rpx;
  box-sizing: border-box;
}
.psBoxCon .text view::before{
  content: "";
  display: block;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #000;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5rpx;
}
.psBox:nth-child(2n-1) .psBoxCon .text{
  color: #fff;
}
.psBox:nth-child(2n-1) .text view::before{
  background: #fff;
}

/* footer */
.footer{
  padding: 30rpx 0;
  background: #f2f2f2;
  text-align: center;
}
.footer .pic{
  width: 180rpx;
}
.footer .text{
  font-size: 25rpx;
  color: #666;
}

public.js

var commonlic={
  getStrLen:function(str,len){
    if(str.length>len){
      return str.substr(0,10)+"..."
    }else{
      return str
    }
  },
  getMyDate:function(timestamp,formats){
    // 将时间戳时间格式改成正常格式
    // formasts 格式包括
    // Y-m-d
    // Y-m-d H:i:s
    // Y年m月d日
    // Y年m月d日 H时i分
    formats=formats || 'Y-m-d';
    var zero = function(value){
      if(value < 10){
        return '0' + value;
      }
      return value;
    };
    var timestamp = timestamp*1000;
    var myDate = timestamp ? new Date(timestamp) : new Date();
    var year = myDate.getFullYear();
    var month = zero(myDate.getMonth() + 1);
    var day = zero(myDate.getDate());

    var hour = zero(myDate.getHours());
    var minite = zero(myDate.getMinutes());
    var second = zero(myDate.getSeconds());

    return formats.replace(/Y|m|d|H|i|s/ig,function(matches){
      return({
        Y:year,
        m:month,
        d:day,
        H:hour,
        i:minite,
        s:second
      })[matches];
    });
  }
}

module.exports=commom

后台请求调用需要忽略非法域名

在这里插入图片描述

最后是效果图

在这里插入图片描述

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是...
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner&qu...
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相...
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是...
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况...
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他...
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此…...
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><met...
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上...