Some small features in the front end

1, click event @click=” selectCity()” selectCity() method name is written in methods

2, page jump util.navigateTo(“selectCity”) util needs here To import the package, import util from’../util’ The page to jump is in brackets.

3, carousel picture autoplay=”true” automatic carousel

• “ @change=’swiperChange($event)’>

  “

• {swiperCurrent in data: 0

• }

• In method

{ swiperChange(e) { this.swiperCurrent = e.mp.detail.current }, corresponding to

style< /span>

.dots { margin: 9px; display: flex;< span class="md-softbreak"> justify-content: center;< /span>

 .dot {
 margin: 2px;
 width: 7px;
 height: 7px;
 
 border-radius: 8px;
 border: 0.1px solid #A1A1A1;
< span> transition: all 0.6s ease-in-out;< br> }
?
 .dot.active {
 width: 18px;
 background: #A1A1A1;
 }
} span>

• The numbers in the carousel diagram are subscripted on the outermost layer

  Set v-if=”showLength”

{{ swiperCurrent+1}}/{{shopScrollPicture.length}} 1/{{shopScrollPicture.length}} data () { return { shopScrollPicture: [], —-This is for storage Array of carousel graph data swiperCurrent: 0, —–subscript } },

Calculated attributes computed: { showLength() { return this.shopScrollPicture.length } },< /span>

• pull-up refresh, pull-up listener event –> adjust Interface –> Array splicing onReachBo ttom() {this.selectGoodsAppletList(this.Name) }—The pull-up monitoring event and methods in methods belong to the same level relationship if (data.data_list.length && data.data_list !== {}) {if (data.data_list&& data.data_list.length) {//array splicing this.commodityData = this.commodityData. concat(data) this.Page_index += 1} else {if (this.Page_context> 5) {wx.showToast({ title: "No more products~", icon: "none", }) this.Page_index = 1}} }—This is written in the corresponding interface span>

• calculation Attribute related

  The difference between computed and watch:

  1.computed is used to monitor self-defined variables, which are not declared in data, but defined directly in computed. Then you can perform two-way data binding on the page to display the result or use it for other processing;

  2.computed is more suitable for processing multiple variables or objects and returning a result value, that is, if one of the multiple variables changes, the value we monitor will also change, for example: In the shopping cart The relationship between the product list and the total amount. As long as the number of products in the product list changes, or the number of products is reduced, increased, or deleted, the total amount should change. The total amount here is the best choice to use the computed attribute to calculate

  1 .watch is mainly used to monitor the changes of the vue instance. Of course, the variables it monitors must be declared in data. It can monitor a variable or an object;

  2.watch is generally used to monitor routing, input input box value special processing, etc., it is more suitable for scenarios where one data affects multiple data ;

  Calculation attributes: allow us to calculate complex values ​​for the specified view. These values ​​will be bound to the dependency value and will only be updated when needed.

  Example: View the total number of all disciplines

• Calculated attribute setter: The calculated attribute only has getter by default, but you can also provide a setter when needed

• The fullName method will execute the method in get when fetching the data; and when setting the data , The method in the set will be executed. Among them, there is a parameter (value) in the set, which is used to pass the parameter to change the value. After setting the value of value, this value will be accepted in the set.

  //set usage: By setting a value to change its associated value, and changing its associated value will cause the fullName value to be recalculated, and the page will also change< /span>

  //27 lines of code usage: introduce an arr value, use Break up the parameters passed in value, turn it into an array, assign values ​​to firstName and lastName respectively, and indirectly change the values ​​of firstName and lastName.

  computed has a feature: when the value it depends on changes , He will recalculate and update.