0
我们正在开发聊天应用程序，因为我在内容div中显示图像，音频和文本。如何在显示前页面时自动滚动到底部
我们有头div，内容div，页脚div。内容div动态添加新数据我希望每次都显示在底部。如果想要查看以前的数据，我想向下滚动查看。如何做到这一点使用jQuery
$(document)
\t \t .on(
\t \t \t \t "pagebeforeshow",
\t \t \t \t "#chat",
\t \t \t \t function() {
\t \t \t \t \t window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
\t \t onFileSystemSuccess, fail);
\t \t load = true;
\t \t $('#opchat').empty();
\t \t $("#preopchat").empty();
\t \t $("#opchat1").empty();
\t \t var checkData = storageChat.getItem("chatdata");
\t \t if (JSON.parse(checkData) != null
\t \t \t \t && JSON.parse(checkData) != undefined) {
\t \t \t storeChatData = JSON.parse(checkData).slice();
\t \t \t if (storeChatData.length > 10) {
\t \t \t \t var sliceChatData = [];
\t \t \t sliceChatData = storeChatData.slice(Math.max(
\t \t \t \t storeChatData.length - 10, 1));
\t \t \t for (var i = 0; i < sliceChatData.length; i++) {
\t \t \t \t if (sliceChatData[i] != undefined) {
\t \t \t \t if (sliceChatData[i].startsWith("file:///")) {
\t \t \t var filepath = sliceChatData[i].split(",")
\t \t \t if (filepath[1] == 'image/jpeg') {
\t \t \t var storedChat = '<img class="popphoto" id="profImgDashBrd" \t style="height: 70px; width: 70px;" src=\''
\t \t \t \t \t \t \t \t \t \t \t \t \t + sliceChatData[i]
\t \t \t \t \t \t \t \t \t \t \t \t \t + '\' >';
\t \t \t \t \t \t \t \t \t \t \t previewData(storedChat);
\t \t } else if (filepath[1] == 'audio/mpeg') {
\t \t \t \t \t \t var storedChat = "<audio controls>"
\t \t \t \t \t \t \t + "<source src='"
\t \t \t \t \t \t \t \t + sliceChatData[i]
\t \t \t \t \t \t \t \t + "' type='video/mp4'>"
\t \t \t \t \t \t + "</audio>" + "<br>";
\t \t \t \t \t previewData(storedChat);
\t \t \t } else {
\t \t var filepath = storeChatData[i].split(",") \t
\t \t \t var storedChat ="<div class='right'>" + "<p>"
\t \t \t + filepath[1] + "</p>" + "</div";
\t \t \t $("#opchat1").append(storedChat);
\t \t \t }
\t \t \t } else {
\t \t var storedChat ="<div class='left'>" + "<p>"
\t \t \t \t + sliceChatData[i] + "</p>" + "</div>" + "<br>";
\t \t \t $("#opchat").append(storedChat);
\t \t \t \t \t }
\t \t \t \t }
\t \t \t }
\t \t } else {
\t \t \t for (var i = 0; i < storeChatData.length; i++) {
\t \t \t if (storeChatData[i] != undefined) {
\t \t \t if (storeChatData[i].startsWith("file:///")) {
\t \t \t var filepath = storeChatData[i].split(",")
\t \t \t if (filepath[1] == 'image/jpeg') {
\t \t \t var storedChat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\''
\t \t \t \t \t + filepath[0] + '\' >';
\t \t \t \t \t previewData(storedChat);
\t \t \t \t \t } else if (filepath[1] == 'audio/mpeg') {
\t \t \t var storedChat = "<audio controls>"
\t \t \t \t \t + "<source src='"
\t \t \t + filepath[0]
\t \t + "' type='video/mp4'>"
\t \t \t + "</audio>" + "<br>";
\t \t \t \t \t \t previewData(storedChat);
\t \t \t } else {
\t \t \t var filepath = storeChatData[i].split(",");
\t \t \t var storedChat ="<div class='right'>" + "<p>"
\t \t \t + filepath[1] + "</p>" + "</div";
\t \t \t $("#opqicchat1").append(storedChat);
\t \t \t \t \t \t \t \t \t \t \t
\t \t \t \t }
\t \t \t } else {
\t var storedChat ="<div class='left'>" + "<p>"
\t \t \t + storeChatData[i] + "</p>" + "</div>" + "<br>"
\t \t \t $("#opqicchat").append(storedChat);
\t \t \t }
\t \t \t }
\t \t \t }
\t }
\t \t \t }
\t \t \t \t });
function onFileSystemSuccess(fileSystem) {
\t folderName = "QLM"
\t var directoryEntry = fileSystem.root;
\t directoryEntry.getDirectory(folderName, {
\t \t create : true,
\t \t exclusive : false
\t }, gotDirEntry, fail)
}
function gotDirEntry(dirEntry) {
\t dirEntry.getFile("newFile.txt", {
\t \t create : true,
\t \t exclusive : false
\t }, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
\t return true;
}
function fail() {
\t alert("error code");
}
// Text ,audio and images Display in chat
function previewData(data) {
\t var storedChat ="<div class='right'>" + "<p>" + data + "</p>" + "</div>" + "<br>";
\t $("#opqicchat1").append(storedChat);
}
// Text enter and submit
$(document).on('click', '#btnchatsend', function() {
\t var txtareaId = "txtarchat";
\t var txtareaVal = $("#" + txtareaId).val();
\t if (txtareaVal != null && txtareaVal != undefined && txtareaVal != "") {
\t \t storeChatData.push("file:///" + "," + txtareaVal);
\t \t storageChat.setItem("chatdata", JSON.stringify(storeChatData));
\t \t previewData(txtareaVal)
\t }
\t $("#" + txtareaId).val("");
\t $(textarea).val("");
});
// record audio and store
function startRecord() {
\t navigator.device.capture.captureAudio(captureSuccess, captureError, {
\t \t limit : 1
\t });
}
function captureSuccess(e) {
\t var audiofile = e[0].localURL;
\t var audiofilePath = e[0].fullPath;
\t audioname = audiofile.substr(audiofile.lastIndexOf('/') + 1);
\t filename = Date.now().toString() + audioname;
\t window.resolveLocalFileSystemURL(audiofile, copyFilePath, fail);
}
function captureError(e) {
\t alert(JSON.stringify(e));
}
function playRecAudio(url) {
\t if (play == true)
\t \t audioRecord = new Media(url, onAudioSuccess, onAudioError);
\t if (play == true) {
\t \t audioRecord.play();
\t \t play = false;
\t } else {
\t \t audioRecord.pause();
\t \t play = true;
\t }
}
function onAudioSuccess() {
}
function onAudioError() {
}
// capture image from camera
function getCapImg(source) {
\t navigator.camera.getPicture(onSavedDocURISuccess, onFails, {
\t \t destinationType : navigator.camera.DestinationType.FILE_URI,
\t \t sourceType : source,
\t \t saveToPhotoAlbum : true
\t });
}
function imageGallery(source) {
\t navigator.camera.getPicture(onSavedDocURISuccess, onFail, {
\t \t quality : 30,
\t \t targetWidth : 600,
\t \t targetHeight : 600,
\t \t destinationType : destinationType.FILE_URI,
\t \t sourceType : source
\t });
}
function onSavedDocURISuccess(imageURI) {
\t filename = imageURI.substr(imageURI.lastIndexOf('/') + 1);
\t filename = Date.now().toString() + filename;
\t window.resolveLocalFileSystemURI(imageURI, copyFilePath, fail);
}
function copyFilePath(fileEntry) {
\t window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSys) {
\t \t fileSys.root.getDirectory(folderName, {
\t \t \t create : true,
\t \t \t exclusive : false
\t \t }, function(dir) {
\t \t \t fileEntry.copyTo(dir, filename, onCopySuccess, fail);
\t \t }, fail);
\t }, fail);
}
function onCopySuccess(entry) {
\t entry
\t \t \t .file(function(file) {
\t \t \t \t storeChatData.push(entry.toURL() + "," + file.type);
\t \t \t \t storageChat.setItem("chatdata", JSON
\t \t \t \t \t \t .stringify(storeChatData));
\t \t \t \t var getimageData = storageQlmChat.getItem("chatdata");
\t \t \t \t var arrayformate = JSON.parse(getimageData);
\t \t \t \t $
\t \t \t \t \t \t .each(
\t \t \t \t \t \t \t \t arrayformate,
\t \t \t \t \t \t \t \t function(index, value) {
\t \t \t \t \t \t \t \t \t var imagepath = value.split(",")
\t \t \t \t \t \t \t \t \t if (index == arrayformate.length - 1) {
\t \t \t \t \t \t \t \t \t \t if (file.type == 'image/jpeg') {
\t \t \t \t \t \t \t \t \t \t \t var storedChat = '<img class="popphoto" style="height: 70px; width: 70px;" src=\''
\t \t \t \t \t \t \t \t \t \t \t \t \t + imagepath[0] + '\' >';
\t \t \t \t \t \t \t \t \t \t \t previewData(storedChat);
\t \t \t \t \t \t \t \t \t \t } else if (file.type == 'audio/mpeg') {
\t \t \t \t \t \t \t \t \t \t \t var storedChat = "<audio controls>"
\t \t \t \t \t \t \t \t \t \t \t \t \t + "<source src='"
\t \t \t \t \t \t \t \t \t \t \t \t \t + imagepath[0]
\t \t \t \t \t \t \t \t \t \t \t \t \t + "' type='video/mp4'>"
\t \t \t \t \t \t \t \t \t \t \t \t \t + "</audio>" + "<br>";
\t \t \t \t \t \t \t \t \t \t \t previewData(storedChat);
\t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t });
\t \t \t });
}
function fail(error) {
\t alert("error" + error.code);
}.left {
margin-top:10px;
position: relative;
background: aqua;
text-align: left;
min-width: 85%;
padding: 15px 10px;
border-radius: 6px;
border: 1px solid #ccc;
float: left;
left: 8%;
}
.left::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
left: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.left::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -8px;
border: 10px solid transparent;
border-top: 10px solid aqua;
clear: both;
}
.right {
position: relative;
background: white;
text-align: right;
min-width: 85%;
padding: 10px 15px;
border-radius: 6px;
border: 1px solid #ccc;
float: right;
right: 5%;
margin-top: 10px;
}
.right::before {
content: '';
position: absolute;
visibility: visible;
top: -1px;
right: -10px;
border: 10px solid transparent;
border-top: 10px solid #ccc;
}
.right::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -8px;
border: 10px solid transparent;
border-top: 10px solid white;
clear: both;
}<div class="headerDiv" data-role="header"
\t id="hdrIdchat" data-position="fixed" data-tap-toggle="false" data-transition="none">
\t <a class="ui-btn ui-icon-arrow-l ui-btn-icon-left" onClick="navBack()"></a>
\t <h1 id="lblHdrchat">Chat</h1>
\t <div data-tap-toggle="false" data-transition="none" style="border-top:1px solid white;width: 100%; text-align: center; display: inline-flex;"> \t \t
\t \t <div style="width: 100%; padding: 10px;">
\t \t \t \t <img alt="" src="images/vo.png" onclick="startRecord()" style="height: 25px;">
\t \t \t </div>
\t \t \t <div style="width: 100%; padding: 10px">
\t \t \t \t <img alt="" src="images/imcht.png" onClick="imageGallery(pictureSource.PHOTOLIBRARY)" style="height: 25px;">
\t \t \t </div>
\t \t \t <div style="width: 100%; padding: 10px">
\t \t \t \t <img alt="" src="images/camcht.png" onclick="getCapImg(navigator.camera.PictureSourceType.CAMERA);" style="height: 25px;">
\t \t </div>
\t </div>
</div>
<div data-role="content">
\t <div onclick="preChatData()">
\t \t <p align="center"></p>
\t </div>
\t <div id="example">
\t \t <div id="preopqicchat"></div>
\t \t <div id="opqicchat" ></div>
\t \t <div id="opqicchat1" ></div>
\t </div>
</div>
<div data-role="footer" data-position="fixed" id="chatfooter"
\t style="background: transparent; border: none;" data-tap-toggle="false" data-transition="none">
\t <div style="display: inline-flex; width: 100%;">
\t \t <div style="width: 100%">
\t \t \t <textarea autofocus="autofocus" id="txtarchat"></textarea>
\t \t </div>
\t \t <div>
\t \t \t <button data-role="button" class="ui-btn ui-btn-b"
\t \t \t \t id="btnchatsend" style="width: 100% !Important;">SEND</button>
\t \t </div>
\t </div>
</div>
我不明白。 –
请更好地缩进您的代码...使用四个空格或更少 – Asken
抱歉。请参阅我修改的问题，我附上屏幕截图也将清楚地明白 –