AngularJS中手机移动端滑屏效果的实现（ionic）

最新推荐文章于 2022-02-18 18:08:16 发布

原创最新推荐文章于 2022-02-18 18:08:16 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在AngularJS中利用Ionic框架创建手机移动端的滑屏效果。通过展示HTML和JS代码，详细说明了如何构建机房、轿厢、层门、底坑井道等不同内容的滑动页面，并提供了用户评价和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<ion-view>
<ion-nav-title><h1 class="title"><b>维保工单</b></h1></ion-nav-title>
<ion-nav-buttons side="left">
<button class="button button-clear icon ion-ios-arrow-back" ng-click="goToMain()"> 返回</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-clear" ng-click="goToMain()"><b>完成</b></button>
</ion-nav-buttons>
<ion-content ng-controller="changeCtrl" style="position: absolute;overflow: auto;">

<div class="row row-wrap" style="background-color: white; margin:0px;">

<div class="col col-center" ng-style="roomstyle.colstyle" ng-click="changestyle(roomstyle,0)">
<p ng-style="roomstyle.pstyle">机房</p>
</div>
<div class="col col-center" ng-style="Jxstyle.colstyle" ng-click="changestyle(Jxstyle,1)">
<p ng-style="Jxstyle.pstyle">轿厢</p>
</div>
<div class="col col-center" ng-style="Cmstyle.colstyle" ng-click="changestyle(Cmstyle,2)">
<p ng-style="Cmstyle.pstyle">层门</p>
</div>
<div class="col col-center" ng-style="Dkjdstyle.colstyle" ng-click="changestyle(Dkjdstyle,3)">
<p ng-style="Dkjdstyle.pstyle">底坑井道</p>
</div>
<div class="col col-center" ng-style="Pjstyle.colstyle" ng-click="changestyle(Pjstyle,4)">
<p ng-style="Pjstyle.pstyle">用户评价</p>
</div>
</div>



<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false" active-slide="myActiveSlide"
style="margin: 0;">

<ion-slide>
<ion-list>
<ion-item style="padding: 0px;border: none;">
<div class="list">
<ion-checkbox ng-repeat="item in devList"
ng-model="item.checked"
ng-checked="item.checked" style="height: 80px;">
<p style="font-size: 16px;font-weight: bold;">{{ item.title }}</p>
{{ item.text }}
</ion-checkbox>
</div>
</ion-item>
</ion-list>
</ion-slide>

<ion-slide>
<ion-list>
<ion-item style="padding: 0px;border: none;">
<div class="list">
<ion-checkbox ng-repeat="item in JxList"
ng-model="item.checked"
ng-checked="item.checked" style="height: 80px;;">
<p style="font-size: 16px;font-weight: bold;">{{ item.title }}</p>
{{ item.text }}
</ion-checkbox>
</div>

</ion-item>
</ion-list>
</ion-slide>


<ion-slide>
<ion-list>
<ion-item style="padding: 0px;border: none;">
<div class="list">
<ion-checkbox ng-repeat="item in CmList"
ng-model="item.checked"
ng-checked="item.checked" style="height: 80px;;">
<p style="font-size: 16px;font-weight: bold;">{{ item.title }}</p>
{{ item.text }}
</ion-checkbox>
</div>
<div>
<p style="padding-left: 25px;font-weight: bold;font-size: 16px;color: #000000;">上传保养照片</p>

<tbody>
<tr>
<td style="height: 20%;"></td>
<td style="height: 30%;">
<div id="localImag1" style="margin-left: 100px;"><img id="preview1"
src="../pageApp/img/Upload.png"
width="70" height="90"
style="display: block; width: 120px; height: 150px;">
</div>
<input type="file" name="file" id="doc1" style="width:70px;margin-left: 125px;"
onchange="setImagePreview();">
</td>
<td></td>

</tr>

</tbody>
</div>
</ion-item>
</ion-list>
</ion-slide>


<ion-slide>
<ion-list>
<ion-item style="padding-left: 0px;padding-right:0px;padding-top:0px;padding-bottom:20px;border: none;">
<div class="list">
<ion-checkbox ng-repeat="item in DkjdList"
ng-model="item.checked"
ng-checked="item.checked" style="height: 80px;">
<p style="font-size: 16px;font-weight: bold;">{{ item.title }}</p>
{{ item.text }}

</ion-checkbox>

</div>
</ion-item>
</ion-list>
</ion-slide>

<ion-slide>
<ion-list ng-repeat="item in eleInfo">
<div class="item row ">
<div class="col col-33 col-center" style="padding-left: 20px;">电梯编号</div>
<div class="col ">{{item.code}}</div>
</div>
<div class="item row">
<div class="col col-33 col-center" style="padding-left: 20px;">注册代码</div>
<div class="col " style="text-decoration: none;">{{item.number}}</div>
</div>
<div class="item row ">
<div class="col col-33 col-center" style="padding-left: 20px;">电梯位置</div>
<div class="col ">{{item.location}}</div>
</div>
<div class="item row row-wrap row-no-padding" style="padding: 0px;margin: 0px;">
<div class="col col-33 col-center" style="padding-left: 20px;">计划日期</div>
<div class="col">
<ionic-datepicker idate="planTime" name="planTime">
<button id="planTime" class="button button-clear" style="width: 100%;color: #000000;">
{{planTime | date:'yyyy/MM/dd'}}
</button>
</ionic-datepicker>
</div>
</div>
<div class="item row row-wrap row-no-padding">
<div class="col col-33 col-center" style="padding-left: 20px;">计划日期</div>
<div class="col">
<ionic-datepicker idate="realTime" name="realTime">
<button id="realTime" class="button button-clear" style="width: 100%;color: #000000;">
{{realTime | date:'yyyy/MM/dd'}}
</button>
</ionic-datepicker>
</div>
</div>
</ion-list>
<div class="list" style="margin-top: 1px;padding:10px;background-color: white;">
<div class="item row row-wrap row-no-padding" style="height: 50px;border: none;padding-left: 10px;">
<div class="col col-33 col-center">
<p style="font-size: 16px;">服务态度</p>
</div>
<div class="col col-center">
<p>
<a style="float: right;">
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[service[0]]"
ng-click="chooseService(0)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[service[1]]"
ng-click="chooseService(1)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[service[2]]"
ng-click="chooseService(2)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[service[3]]"
ng-click="chooseService(3)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[service[4]]"
ng-click="chooseService(4)" style="font-size: 30px;"></i>
</a>
</p>
</div>
</div>

<div class="item row row-wrap row-no-padding" style="height: 50px;border: none;padding-left: 10px;">
<div class="col col-33 col-center">
<p style="font-size: 16px;">保养满意度</p>
</div>
<div class="col col-center">
<p>
<a style="float: right;">
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[satisfaction[0]]"
ng-click="chooseSatisfaction(0)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[satisfaction[1]]"
ng-click="chooseSatisfaction(1)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[satisfaction[2]]"
ng-click="chooseSatisfaction(2)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[satisfaction[3]]"
ng-click="chooseSatisfaction(3)" style="font-size: 30px;"></i>
<i ng-class="{true: 'icon ion-ios-star energized', false: 'icon ion-ios-star-outline'}[satisfaction[4]]"
ng-click="chooseSatisfaction(4)" style="font-size: 30px;"></i>
</a>
</p>
</div>
</div>
</div>

<div style="padding-bottom: 0;padding-left: 15px;padding-right: 5px;padding-top: 0px;text-align: center;">


<input type="button" style="background-image: url('img/sign.png');width: 75px;height: 75px;background-size: 100% 100%;background-position: center center;" onClick="location.href='sign.html'"/>



</div>

</ion-slide>
</ion-slide-box>

<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" on-infinite="loadMore()" distance="10%" immediate-check='true'>
</ion-infinite-scroll>
</ion-content>
</ion-view>

JS代码：

.controller('changeCtrl', function ($scope, $http, $ionicPopup, $stateParams, $state, $ionicLoading, $ionicHistory, $cacheFactory, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

$scope.getOrderStatus = function (index) {
var status = null;
//全部略去
if (index == 1)
status = '0'; //机房

else if (index == 2)
status = '1'; //轿厢

else if (index == 3)
status = '2'; //层门

else if (index == 4)
status = '3'; //底坑井道

else if (index == 5)
status = '4'; //用户评价
OrderFactory.getPayOrderByStatus(status).then(function (response) {
$scope.orderlist = response;
});
};

/**
* 换标题样式

* @param obj 选中的那个状态对象，全部对应allstyle,待付款对应Fkstyle.......
* @param i tab选中的索引，选中第几页

*/
$scope.changestyle = function (obj, i) {
$scope.laststyle.colstyle = unselectColstyle;
$scope.laststyle.pstyle = unselectPStyle;
obj.colstyle = selectColstyle;
obj.pstyle = selectPStyle;
$scope.laststyle = obj;
$scope.selectedTab(i);
//$scope.doselectCondition(i);
$ionicScrollDelegate.scrollTop();
};
/**
* 滑屏切换，调整标题

* @param index
*/
$scope.slideHasChanged = function (index) {
if ($scope.lastindex != index) {
$scope.myActiveSlide = index;

if (index == 0)
$scope.changestyle($scope.roomstyle, index);
else if (index == 1)
$scope.changestyle($scope.Jxstyle, index);
else if (index == 2)
$scope.changestyle($scope.Cmstyle, index);
else if (index == 3)
$scope.changestyle($scope.Dkjdstyle, index);
else if (index == 4)
$scope.changestyle($scope.Pjstyle, index);
else {
if ($scope.lastindex == 0)
$scope.changestyle($scope.roomstyle, 0);
else if ($scope.lastindex == 4)
$scope.changestyle($scope.roomstyle, 4);

}
}

$scope.lastindex = index;
};

$scope.selectedTab = function (index) {
$ionicSlideBoxDelegate.slide(index);
};
$scope.selectedTab(0);
$scope.lastindex = 0;

$scope.myActiveSlide = 0;
var selectColstyle = {
"border-bottom":"1px solid orange",
"text-align":"center"
};
var unselectColstyle = {
"border":"none",
"text-align":"center"
};
var selectPStyle = {
"color":"orange",
"font-size":"15px",
"font-weight":"bold"
};
var unselectPStyle = {
"color":"#000000"
};

$scope.roomstyle = {
colstyle:selectColstyle,
pstyle:selectPStyle
};
$scope.Jxstyle = {
colstyle:unselectColstyle,
pstyle:unselectPStyle
};
$scope.Cmstyle = {
colstyle:unselectColstyle,
pstyle:unselectPStyle
};
$scope.Dkjdstyle = {
colstyle:unselectColstyle,
pstyle:unselectPStyle
};
$scope.Pjstyle = {
colstyle:unselectColstyle,
pstyle:unselectPStyle
};
$scope.laststyle = $scope.roomstyle;

//机房信息

$http.get('slide/devList.json').success(function (response) {
$scope.devList = response;
});
$http.get('slide/CmList.json').success(function (response) {
$scope.CmList = response;
});
$http.get('slide/DkjdList.json').success(function (response) {
$scope.DkjdList = response;
});
$http.get('slide/JxList.json').success(function (response) {
$scope.JxList = response;
});
$scope.scrollStyle = {
"height":document.body.scrollHeight - 52 - 44 + "px"
};