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

最新推荐文章于 2024-01-16 10:52:21 发布

MonkeyKingBi

最新推荐文章于 2024-01-16 10:52:21 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/MonkeyKingBi/article/details/70844331

版权

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

摘要由CSDN通过智能技术生成

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>
<!-- <div style="padding-bottom: 0;padding-left: 15px;padding-right: 5px;padding-top: 0px;">
<div class=" advice" style="font-size: 16px;font-weight: bold;padding-left: 30px;">保养建议:</div>
<!<input type="text" style="text-align: center;border: 2px;font-size: 25px;" />>
<textarea style="font-size: 15px;border:#808080 solid 1px;;margin-top: 20px;padding:20px;height: 150px;width: 350px;"></tex