Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge about "how to modify the radio size of Weixin Mini Programs (Mini)." In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

The radio included in Mini programs seems to be resizable, which is inconvenient to use in projects and often affects the effect of the entire interface. To solve this problem, the radio effect is achieved using text tags combined with icon tags.

Thinking:

the one on the left

on the other upon

to achieve the radio effect.

Arrange all regions in a list. Set the isSelect attribute for the region. If isSelect=true, the type of icon displayed is success. Otherwise, the type of icon displayed is circle.

When text is clicked, the clicked text is determined according to the id of the area, and the isSelect attribute of the area corresponding to the clicked text is set to true or false.

First attach the wxml file code part:

{{area.name}} First set a scroll-view, set the parent container position size of the selection box, where the wxss of radio-group sets the font size in the container, and rehearse the method.

.radio-group{font-size: 26rpx;display: flex;flex-direction: column;} Next we traverse the areas array to display the area name +icon where is the area name

Bindtap and data-areaId are set. Here, we want to interact with js, where data-areaId is the parameter passed in the past.

Determine the displayed area based on the isSelect property of the area object

One of them is a circle and the other is a green tick. In the example, the icon size is set to 10, which can be changed at will.

Next is the JS code section.

//selectAreaOk: function(event){var selectAreaId = event.target.dataset.areaid;var that = thisareaId = selectAreaIdfor(var i = 0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.