Home WeChat Applet Mini Program Development How to implement the WeChat applet scroll view container

How to implement the WeChat applet scroll view container

Jan 31, 2018 pm 01:41 PM
how container Applets

This article mainly introduces the relevant information on the implementation method of the scroll view container of the WeChat applet. I hope this article can help everyone and let everyone master this part of the content. Friends who need it can refer to it. I hope it can help everyone.

How to implement the scroll view container of the WeChat applet

Directly upload the codes and renderings of the two solutions:

Option 1

This solution is to use the view directly and set the overflow: scroll


wxml:
 <view class="container">
  <view class="content" wx:for="{{11}}" wx:key="item">
    {{item}}
  </view>
</view>
Copy after login

wxss:


 .container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  padding-bottom: 20rpx;
  background: #FD9494;
}

.content {
  margin: 20rpx auto 0 auto;
  width: 710rpx;
  height: 300rpx;
  background: #ddd;
  border-radius: 16rpx;
  font-size: 80rpx;
  line-height: 300rpx;
  text-align: center;
}
Copy after login

Rendering:

##Option 2

Use scroll-view + container as the container


wxml:



<scroll-view class="main_container" scroll-y>
  <view class="container">
    <view class="content" wx:for="{{11}}" wx:key="item">
      {{item}}
    </view>
  </view>
</scroll-view>
Copy after login

wxss:

##

.main_container {
  position: relative;
  width: 750rpx;
  height: 100vh;
  background: #FD9494;
}

 .container {
  position: absolute; /*使用absolute的原因是因为为了防止第一个子视图有margin-top时,造成顶部留白的情况*/
  left: 0;
  top: 0;
  width: 100%;
  padding-bottom: 20rpx;
} 

.content {
  margin: 20rpx auto 0 auto;
  width: 710rpx;
  height: 300rpx;
  background: #ddd;
  border-radius: 16rpx;
  font-size: 80rpx;
  line-height: 300rpx;
  text-align: center;
}
Copy after login

Rendering:

Comparison results:


Because scrolling on the iPhone has a spring effect, solution 1 will not be smooth when scrolling. This situation will not occur in Option 2, and the scrolling will be smooth.

Option 2 is a better scroll view solution that I have summarized so far.

Related recommendations:


Slider view container for WeChat applet development

Recommended 10 view container source codes (collection )

WeChat applet: view (view container) component interpretation and analysis

The above is the detailed content of How to implement the WeChat applet scroll view container. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use Docker for container failure recovery and automatic restart How to use Docker for container failure recovery and automatic restart Nov 07, 2023 pm 04:28 PM

As a lightweight virtualization platform based on container technology, Docker has been widely used in various scenarios. In a production environment, high availability and automatic failure recovery of containers are crucial. This article will introduce how to use Docker for container failure recovery and automatic restart, including specific code examples. 1. Configuration of automatic container restart In Docker, the automatic restart function of the container can be enabled by using the --restart option when running the container. Common options are: no: do not automatically restart. silent

Implement card flipping effects in WeChat mini programs Implement card flipping effects in WeChat mini programs Nov 21, 2023 am 10:55 AM

Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: &lt;!--index.wxml--&gt;&l

AtomHub, an open source container mirroring center jointly created by Huawei, Inspur and other units, announced that it is officially open for public testing and can stably download domestic services. AtomHub, an open source container mirroring center jointly created by Huawei, Inspur and other units, announced that it is officially open for public testing and can stably download domestic services. Jan 02, 2024 pm 03:54 PM

According to Huawei’s official news, the Open Atomic Developer Conference, with the theme of “Everything for Developers”, was held in Wuxi for two days, from December 16 to 17. The conference was led by the Open Atomic Open Source Foundation, Huawei, and Inspur. , DaoCloud, Xieyun, Qingyun, Hurricane Engine, as well as the OpenSDV Open Source Alliance, openEuler community, OpenCloudOS community and other member units jointly initiated the construction of the AtomHub Trusted Mirror Center, which is officially open for public testing. AtomHub adheres to the concepts of co-construction, co-governance, and sharing, and aims to provide open source organizations and developers with a neutral, open and co-constructed trusted open source container mirror center. In view of the instability and uncontrollability of image warehouses such as DockerHub, and some

How to install Redhat Podman on Windows 10 or 11 via CMD How to install Redhat Podman on Windows 10 or 11 via CMD Oct 02, 2023 pm 09:33 PM

Install RedHatPodman on Windows 11 or 10 Follow the steps below to install RedHatPodman on your Windows machine using Command Prompt or Powershell: Step 1: Check System Requirements First, you have to make sure that your Windows system is running with the latest updates so that it can meet the requirements to run Podman requirements. You should be using Windows 11 or Windows 10 version 1709 (Build 16299) or higher and you have to enable Windows Subsystem for Linux 2 (WSL2) and VM features, well if they are not activated yet then you can use The two-step command executes this

Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library Oct 31, 2023 pm 09:25 PM

According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling

How uniapp achieves rapid conversion between mini programs and H5 How uniapp achieves rapid conversion between mini programs and H5 Oct 20, 2023 pm 02:12 PM

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

How to operate mini program registration How to operate mini program registration Sep 13, 2023 pm 04:36 PM

Mini program registration operation steps: 1. Prepare copies of personal ID cards, corporate business licenses, legal person ID cards and other filing materials; 2. Log in to the mini program management background; 3. Enter the mini program settings page; 4. Select " "Basic Settings"; 5. Fill in the filing information; 6. Upload the filing materials; 7. Submit the filing application; 8. Wait for the review results. If the filing is not passed, make modifications based on the reasons and resubmit the filing application; 9. The follow-up operations for the filing are Can.

How to get membership in WeChat mini program How to get membership in WeChat mini program May 07, 2024 am 10:24 AM

1. Open the WeChat mini program and enter the corresponding mini program page. 2. Find the member-related entrance on the mini program page. Usually the member entrance is in the bottom navigation bar or personal center. 3. Click the membership portal to enter the membership application page. 4. On the membership application page, fill in relevant information, such as mobile phone number, name, etc. After completing the information, submit the application. 5. The mini program will review the membership application. After passing the review, the user can become a member of the WeChat mini program. 6. As a member, users will enjoy more membership rights, such as points, coupons, member-exclusive activities, etc.

See all articles