การไหลของน้ำตกแบบมินิโปรแกรมช่วยแก้ปัญหาช่องว่างความสูงที่มากเกินไประหว่างด้านซ้ายและด้านขวา

หากเราต้องการบรรลุเอฟเฟกต์เค้าโครงการไหลของน้ำตกและแสดงตามลำดับจากซ้ายไปขวา วิธีเค้าโครง CSS ไม่สามารถตอบสนองความต้องการของเราได้ในขณะนี้ อ้างถึงเอฟเฟกต์การไหลของน้ำตกของ Xiaohongshu เสี่ยวหงซูแบ่งออกเป็นคอลัมน์ซ้ายและขวาและสามารถแสดงเป็นเลขคี่และเลขคู่ได้

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{index%2 == 0}} class=item></view> </view> <view class=waterfall-right> <ดู wx:if={{index%2 == 1}} class=item></view> </view></view>

แต่ปัญหาก็มาถึง ด้วยความไม่แน่นอนของความสูงของแต่ละองค์ประกอบ จึงมีความเป็นไปได้สูงที่ความสูงระหว่างคอลัมน์ซ้ายและขวาจะแตกต่างกันมาก

ในการแก้ปัญหานี้เราจำเป็นต้องค้นหาสาเหตุที่ทำให้ความสูงของแต่ละองค์ประกอบแตกต่างกัน โดยทั่วไปคือ ความสูงของภาพ หรืออาจเป็นบางพื้นที่ที่แสดงตามเงื่อนไขเท่านั้น ของรูปภาพแตกต่างออกไป และความสูงของส่วนอื่นๆ ยังคงไม่เปลี่ยนแปลง ซึ่งทำให้การคำนวณของเราง่ายขึ้น

แนวคิดทั่วไปคือการหาความสูงของคอลัมน์ซ้ายและขวา ในการคำนวณความสูงของคอลัมน์ซ้ายและขวา โปรดป้อนความแตกต่างของระดับโค้ด และย้าย 1/2 ของ threshold ความแตกต่างระหว่างทั้งสองคอลัมน์ ดังที่แสดงใน รูป:

ข้างต้นเป็นสถานะในอุดมคติ แต่มันเป็นไปไม่ได้สำหรับเราที่จะตัดองค์ประกอบต่างๆ ออกไป เราจำเป็นต้องรู้ว่ามีองค์ประกอบที่อยู่ด้านที่สูงกว่าซึ่งเหมาะสำหรับการเคลื่อนไหวหรือไม่ หาก minH ซึ่งเป็นองค์ประกอบที่เล็กที่สุดในคอลัมน์ที่มีความสูงสูงสุด น้อยกว่า threshold ความแตกต่าง จากนั้นเราก็สามารถย้ายมันได้ คุณสามารถนำองค์ประกอบ minH ไปทางด้านยาวที่ใกล้กับครึ่งหนึ่งของความสูงมากที่สุด (โดยปกติแล้วองค์ประกอบที่มีความสูงน้อยที่สุด คุณสามารถย้ายองค์ประกอบด้วย ส่วนสูงที่เล็กที่สุดอย่างชาญฉลาด) หากองค์ประกอบที่มีความสูงน้อยที่สุดมีขนาดใหญ่กว่าส่วนต่าง ก็ไม่จำเป็นต้องย้ายองค์ประกอบนั้น

ดังนั้นวิธีการย้ายองค์ประกอบจะได้รับตำแหน่งแอตทริบิวต์ตามค่าเริ่มต้น โดยค่าจะอยู่ที่กึ่งกลาง หากองค์ประกอบถูกย้ายไปทางซ้าย ให้กำหนดแอตทริบิวต์ให้กับองค์ประกอบ: ตำแหน่ง:ซ้าย; คุณสมบัติตำแหน่งแล้วตามด้วยเลขคี่และเลขคู่ดังนี้

 <view class=waterfall> <view class=waterfall-left> <view wx:if={{item.position=='left' || (index%2 == 0&&item.position=='center')}} คลาส =item></view> </view> <view class=waterfall-right> <view wx:if={{item.position=='right' || (index%2 == 1&&item.position=='center ')}} ชั้น=รายการ></ดู> </view></view>

ณ จุดนี้ ปัญหาความสูงที่แตกต่างกันมากสามารถแก้ไขได้

ประเด็นสำคัญคือการหาความกว้างและความสูงของรูปภาพ เพื่อที่เราจะได้ทราบความสูงของทั้งสองคอลัมน์ได้

1. อินเทอร์เฟซส่งคืนความกว้างและความสูงของรูปภาพ

อินเทอร์เฟซส่งคืนความกว้างและความสูงของรูปภาพ ดังนั้นหากเราสะสมความสูงของรูปภาพโดยตรง เราก็จะสามารถเปรียบเทียบความสูงของทั้งสองคอลัมน์และรับส่วนต่างของความสูงได้

หาก minH ในด้านที่สูงกว่าน้อยกว่า threshold ความแตกต่างระหว่างความสูงของคอลัมน์ทั้งสอง นั่นคือ minH < threshold ดังนั้น minH จะต้องถูกย้าย

ด้วยวิธีนี้ ในขณะที่รับข้อมูล เราสามารถรู้ได้ว่าจำเป็นต้องย้ายองค์ประกอบหรือไม่ หลังจากประมวลผลข้อมูลแล้ว ข้อมูลจะแสดงผลไปยังเลเยอร์มุมมองทันที

แน่นอนว่าวิธีนี้เป็นวิธีที่ไร้กังวลที่สุด แต่อินเทอร์เฟซอาจไม่ส่งคืนความกว้างและความสูงของรูปภาพ ดังนั้นจึงต้องใช้วิธีที่สอง

2. อินเทอร์เฟซไม่ส่งคืนความกว้างและความสูงของรูปภาพ ความกว้างและความสูงของรูปภาพจะได้รับในเหตุการณ์การโหลดรูปภาพ

ฟังเหตุการณ์การโหลดรูปภาพและรับความกว้างและความสูงของรูปภาพ หลังจากโหลดรูปภาพสุดท้ายแล้ว ให้ใช้ boundingClientRect เพื่อวัดความสูงของทั้งสองคอลัมน์และรับส่วนต่างของความสูง

ในวิธีนี้ คุณต้องวัดว่าจำเป็นต้องย้ายองค์ประกอบหลังจากโหลดรูปภาพแล้วหรือไม่ การเคลื่อนไหวขององค์ประกอบจะชัดเจนยิ่งขึ้น

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network