ionic类似时间轴的实现

来源：互联网发布：中英文语音翻译软件编辑：程序博客网时间：2024/06/07 00:36

最近做了一个，类似时间轴的信息公告页面。代码如下：

<style>    .timeLine{      width:100%;      position:relative    }    .timeLine .shade{      height:50%;      width:50%;      position:absolute;      border-right:1px solid #f5f5f5;    }    .left-container{      height:100%;      width:50%;      float:left;      background-color:#f5f5f5;      padding:10px 20px 10px 15px;      border-right:1px solid #FE87A5;    }    .right-container{      height:100%;      width:50%;      float:left;      background-color:#F5DEE5;      padding:10px 15px 10px 20px;    }    .right-container .box,.left-container .box{      border-radius:5px;      height:100%;      width:100%;      position:relative;    }    .right-container .box{      background:#FE87A5;      color:white    }    .left-container .box{      background:white;    }    .content {      overflow:hidden;      margin:5px;      word-break: break-all;      word-wrap: break-word;      overflow-wrap: break-word    }    .center-container{      position:absolute;      margin: auto;      top: 0;      left: 0;      bottom: 0;      right: 0;      background:#FE87A5;      color:white;      text-align:center;      line-height:30px;      font-size:10px    }    .box .nickName{      margin-left: 3px;      margin-right: 3px;      font-size: 10px;      border-bottom: 1px solid #E2DEDE;    }    .box .search{      position: absolute;      right: 0;      bottom: 0;      height: 45%;    }    .search .button.button-icon:before{      font-size:25px    }  </style>  <ion-content class="has-header has-footer" style="overflow: auto" id="teamContent">    <!--结尾End-->    <div class="timeLine" ng-style="{height:timeLineHeight+ 'px'}">      <div class="left-container">      </div>      <div class="right-container">      </div>      <div class="shade" ></div>      <div class="center-container" ng-style="lineTime(true)">End</div>    </div>    <!--实体内容-->    <div class="timeLine" ng-style="{height:timeLineHeight+ 'px'}" ng-repeat="date in teamBulletinList.myDate track by $index">      <!--左边内容-->      <div class="left-container">        <div class="box" ng-if="teamBulletinList.receive[date].length > 0 " ng-click="showDetail(teamBulletinList.receive[date])">          <div class="nickName" style="border-bottom: 1px solid #FE87A5;">{{teamBulletinList.receive[date][0].nickName}}</div>          <div class="content" ng-style="{width:innerContentWidth + 'px',height:innerContentHeight + 'px'}">{{teamBulletinList.receive[date][0].content}}</div>          <div class="search">            <a class="button button-icon icon ion-ios-search" ></a>          </div>        </div>      </div>      <!--右边内容-->      <div class="right-container">        <div class="box" ng-if="teamBulletinList['send'][date].length > 0"  ng-click="showDetail(teamBulletinList['send'][date])">          <div class="nickName" >{{teamBulletinList['send'][date][0].nickName}}</div>          <div class="content" ng-style="{width:innerContentWidth + 'px',height:innerContentHeight + 'px'}">{{teamBulletinList['send'][date][0].content}}</div>          <div class="search">            <a class="button button-icon icon ion-ios-search"  style="color:white"></a>          </div>        </div>      </div>      <!--中间时间轴-->      <div class="center-container" ng-style="lineTime(date!= null)">{{date}}</div>    </div>    <!--开始Start-->    <div class="timeLine" ng-style="{height:timeLineHeight+ 'px'}" ng-if="isEnd">      <div class="left-container">      </div>      <div class="right-container">      </div>      <div class="shade" ng-style="{top:timeLineHeight/2 + 'px'}"></div>      <div class="center-container" ng-style="lineTime(true)">Start</div>    </div>    <ion-infinite-scroll on-infinite="loadMore()" distance="1%" immediate-check="false" ng-if="!isEnd"></ion-infinite-scroll>  </ion-content>  <ion-footer-bar>      <div class="item-input-inset" style="width:100%">        <label class="item-input-wrapper">          <input type="text" placeholder="请输入所发布的内容" ng-model="content">        </label>        <button class="button button-small" style="background:#FE87A5;color:white" ng-click="send()">          Submit        </button>      </div>  </ion-footer-bar>

js部分如下：

/**     *初始化时间轴参数     * */    $scope.timeLineHeight = 120; //可根据实际需求调整    var obj = document.getElementById("teamContent");    var contentHeight = obj.clientHeight;    var contentWidth = obj.clientWidth;    var num = parseInt(contentHeight/$scope.timeLineHeight) - 1 ;    $scope.innerContentWidth = contentWidth/2 - 35 - 10 ;    $scope.innerContentHeight = $scope.timeLineHeight - 20 - 21 - 10;    /**     * lineTime样式     * */    $scope.lineTime = function(b){      var str = {        "height":"10px",        "width":"10px",        "border-radius":"5px"      };      if(b) {        str = {          "height": "30px",          "width": "30px",          "border-radius": "15px"        }      }      return str;    };    /**     *显示详情     * */    $scope.showDetail = function(item){      $scope.tempItem = item;      $scope.myPopupDetail = $ionicPopup.show({        cssClass:'team-popup',        template: "<div class='list'>" +        "<div ng-repeat='item in tempItem' style='margin:10px'>" +        "<div style='font-size:10px;border-bottom:1px solid #d3d3d3'>{{item.nickName}}" +        "<div style='text-align:right;color:red;margin-top:-21px'>{{item.createTime}}" +        "</div>" +        "</div>" +        "<div style='margin:10px;color:#8c427a'>{{item.content}}</div>" +        "<br/>" +        "</div>" +        "</div>",        scope: $scope      });    };

数据格式：

input = [{}]；output = {          myDate:[date0,date1···],          receive:[{date0:[input···]},date1:[input···]···],          send:[{date0:[input···]},date1:[input···]···]        };

阅读全文

0 0