Моя проблема
После многих часов проб и ошибок я наконец-то заставил свою страницу выглядеть так, как хотел. Однако сейчас я пытаюсь добавить спиннер индикатора активности, пока страница загружается, и у меня очень много времени, чтобы заставить его даже отображаться.
Вот страница, на которую я ссылаюсь:
Нижняя кнопка зафиксирована и не будет прокручиваться. Я думаю, что это часть моей проблемы.
Мой XML
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar" >
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left"></ActionItem>
<Label class="action-bar-title" text="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button id="signUpButton" class="submitButton h2 border" text="{{ showDetails ? 'Hide' : 'Next' }}" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<!-- content -->
<StackLayout dock="top" width="100%" height="75" >
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<ScrollView>
<StackLayout class="">
<Label text="Choose Your Program" class="h3 ChooseHeader" width="100%"/>
<Image src="~/images/chooseYourCourse/diabetes.png"
stretch="aspectFit"
class="productImage "
tap="onDiabetesTap"
id="diabetes"
name="diabetes"></Image>
<Image src="~/images/chooseYourCourse/generalHealth.png"
stretch="aspectFit"
class="productImage "
tap="tapGeneral" borderRadius="30" borderStyle="solid"></Image>
<Image src="~/images/chooseYourCourse/hypertention.png"
stretch="aspectFit"
class="productImage"
tap="tapHypertention"></Image>
<Label class="m-10 p-10" text="Our programs adhere to the most current medical research."/>
</StackLayout>
</ScrollView>
<!-- end content -->
</DockLayout>
<StackLayout verticalAlignment="middle">
<ActivityIndicator busy="{{ isBusy }}" />
</StackLayout>
</Page>
Вот мой код:
const Signup2ViewModel = require("./signup2-view-model");
const app = require("tns-core-modules/application");
const frameModule = require("tns-core-modules/ui/frame");
var dialogs = require("tns-core-modules/ui/dialogs");
const topmost = require("tns-core-modules/ui/frame").topmost;
var gesturesModule = require("tns-core-modules/ui/gestures");
const view = require("tns-core-modules/ui/core/view");
const ActivityIndicator = require("tns-core-modules/ui/activity-indicator").ActivityIndicator;
var signup2ViewModel = new Signup2ViewModel({ isBusy: false });
var card;
var exp;
var cvc;
var signUpButton;
function onNavigatingTo(args) {
const page = args.object;
pageArgs = page;
page.bindingContext = signup2ViewModel;
setTimeout(() => {
console.log("here");
signup2ViewModel.isBusy = true;
// Hides the soft input method, ususally a soft keyboard.
}, 5100);
}
exports.loaded = function (args) {
var page = args.object;
page.bindingContext = signup2ViewModel;
signup2ViewModel.isBusy = false;
};
function onDiabetesTap(args) {
console.log(args);
//alert("Diabetes");
args.object.page.frame.navigate({
moduleName: "./signup3/signup3-page",
animated: true,
transition: {
name: "slideLeft",
duration: 380,
curve: "easeIn"
}
});
}
function onDrawerButtonTap(args) {
const sideDrawer = app.getRootView();
sideDrawer.showDrawer();
}
function onSignupButtonTap(args) {
signup2ViewModel.set("authenticating", true);
}
exports.onDiabetesTap = onDiabetesTap;
exports.onSignupButtonTap = onSignupButtonTap;
exports.onDrawerButtonTap = onDrawerButtonTap;
Как вы можете видеть, я устанавливаю isBusy в значение true onNavigateTo и значение false при загрузке.
Это не работает, не могли бы вы указать мне правильное направление? Я уверен, что нужна помощь.
Спасибо.
John